html - 纯 css slider - 为什么图像显示在 block 中？

Question

我有一个图片 slider - 当我只有 4 张图片时一切正常。当我开始向幻灯片放映添加图像时，同时显示了 2 张图片，因此 slider 不起作用。

对于添加图片时我做错了什么任何想法，我将不胜感激。

谢谢!

html {
  background: radial-gradient(#238dbb, #114476);
  height: 100%;
  text-align: center;
  font-family: Helvetica;
  font-size: 3em;
  color: #134c7e;
}
input.set {
  display: none;
}
#slide1:checked ~ .mask .overflow {
  margin-left: 0;
}
#slide2:checked ~ .mask .overflow {
  margin-left: -100%;
}
#slide3:checked ~ .mask .overflow {
  margin-left: -200%;
}
#slide4:checked ~ .mask .overflow {
  margin-left: -300%;
}
#slide5:checked ~ .mask .overflow {
  margin-left: -400%;
}
#slides {
  margin: 50px auto;
  width: 80%;
  position: relative;
}
#slides .mask {
  width: 90%;
  overflow: hidden;
  margin: auto;
}
#slides .overflow {
  width: 400%;
  -webkit-transform: translateZ(0);
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
#slides .slide {
  width: 25%;
  height: 200px;
  line-height: 200px;
  float: left;
  background: #fff;
}
#controls {
  width: 100%;
}
#controls label {
  display: none;
  width: 5%;
  height: 60px;
  opacity: 0.3;
  position: absolute;
  top: 50%;
  margin-top: -30px;
  cursor: pointer;
  background: #000;
}
#controls label:hover {
  opacity: 0.8;
}
#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(5) {
  right: 0;
  display: block;
}
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4) {
  left: 0;
  display: block;
}

<div id="slides">

  <input checked type="radio" name="slider" id="slide1" class="set" />
  <input type="radio" name="slider" id="slide2" class="set" />
  <input type="radio" name="slider" id="slide3" class="set" />
  <input type="radio" name="slider" id="slide4" class="set" />
  <input type="radio" name="slider" id="slide5" class="set" />

  <div class="mask">

    <div class="overflow">

      <div class="slide">
        <img src="http://static.asiawebdirect.com/m/phuket/portals/phuket-com/homepage/phuket-magazine/freedom-beach/pagePropertiesImage/freedom-beach.jpg">
      </div>
      <div class="slide">2</div>
      <div class="slide">
        <img src="http://static.asiawebdirect.com/m/phuket/portals/phuket-com/homepage/phuket-magazine/freedom-beach/pagePropertiesImage/freedom-beach.jpg">
      </div>
      <div class="slide">
        <img src="http://7-themes.com/data_images/out/33/6882876-beach-sunset.jpg">
      </div>
      <div class="slide">
        <img src="http://wallpapercave.com/wp/rt17YTU.jpg">
      </div>
    </div>

  </div>

  <div id="controls" onclick="">

    <label for="slide1"></label>
    <label for="slide2"></label>
    <label for="slide3"></label>
    <label for="slide4"></label>
    <label for="slide5"></label>

  </div>

</div>

Answer 1

查看您的 CSS，您的 .slide 类有 width: 25%。当然，如果您有 5 张宽度为 25% 的幻灯片，您将超出父容器的宽度。最后一张幻灯片将包裹在下面，这可能是您看到两张幻灯片的原因。

尝试将您的 .slide 类更改为 width: 20%，这样它们的宽度之和就是 100%。

为了它们仍各自占据 100% 的宽度，您必须将父 .overflow 宽度设置为 500%(每张幻灯片为 100%)。