使图像滑块全宽响应

Question

I'm trying to make an image slider that is full-width responsive with HTML and CSS only. I am stuck at the moment on how to make the slider full-width responsive.

 .slides { padding: 0; width: 868px; height: 637px; display: block; margin: auto; position: relative; } .slides * { user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; } .slides input { display: none; } .slide-container { display: block; } .slide { top: 0; opacity: 0; width: 868px; height: 637px; cursor: pointer; display: block; position: absolute; transition: all .7s ease-in-out; } .slides img { width: 100%; height: 100%; } .nav label { height: 100%; display: none; position: absolute; z-index: 9; cursor: pointer; transition: opacity .2s; color: #FFF; font-size: 50pt; text-align: center; padding: 16px; line-height: 637px; } .slide:hover+.nav label { opacity: 0.5; } .nav .next { right: 0; } input:checked+.slide-container .slide { opacity: 1; transform: scale(1); transition: opacity 1s ease-in-out; } input:checked+.slide-container .nav label { display: block; }

 <ul class="slides"> <input type="radio" name="radio-btn" id="img-1" checked /> <li class="slide-container"> <div class="slide"> <img id src="assets/images/Slide/bilhete.png" /> </div> <div class="nav"> <label for="img-6" class="prev">&#x2039;</label> <label for="img-2" class="next">&#x203a;</label> </div> </li> <input type="radio" name="radio-btn" id="img-2" /> <li class="slide-container"> <div class="slide"> <img src="assets/images/Slide/aplausos.png" /> </div> <div class="nav"> <label for="img-1" class="prev">&#x2039;</label> <label for="img-3" class="next">&#x203a;</label> </div> </li> <input type="radio" name="radio-btn" id="img-3" /> <li class="slide-container"> <div class="slide"> <img src="assets/images/Slide/Pa%C3%A7os.png" /> </div> <div class="nav"> <label for="img-2" class="prev">&#x2039;</label> <label for="img-4" class="next">&#x203a;</label> </div> </li> <input type="radio" name="radio-btn" id="img-4" /> <li class="slide-container"> <div class="slide"> <img src="assets/images/Slide/natal.png" /> </div> <div class="nav"> <label for="img-3" class="prev">&#x2039;</label> <label for="img-5" class="next">&#x203a;</label> </div> </li> <input type="radio" name="radio-btn" id="img-5" /> <li class="slide-container"> <div class="slide"> <img src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" /> </div> <div class="nav"> <label for="img-4" class="prev">&#x2039;</label> <label for="img-6" class="next">&#x203a;</label> </div> </li> <input type="radio" name="radio-btn" id="img-6" /> <li class="slide-container"> <div class="slide"> <img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" /> </div> <div class="nav"> <label for="img-5" class="prev">&#x2039;</label> <label for="img-1" class="next">&#x203a;</label> </div> </li> </ul>

Any help is going to be appreciated. I have to use CSS and HTML only.

Answer 1

You need to change the widths to 100% in these two places:

.slides {
  padding: 0;
  width: 100%;
  height: 637px;
  display: block;
  margin: auto;
  position: relative;
}

.slide {
  top: 0;
  opacity: 0;
  width: 100%;
  height: 637px;
  cursor: pointer;
  display: block;
  position: absolute;
  transition: all .7s ease-in-out;
 }