纯 CSS 滑块 - 为什么图像显示在块中？

Question

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

如果我在添加图片时对我做错了什么提出任何想法，我将不胜感激。

谢谢！

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%）。

Answer 2

您需要调整#slides .overflow 的宽度现在它有width: 400%;，它允许4 个全角子级。如果您添加幻灯片，请增加该值，例如 600% 用于 6 张幻灯片，每张幻灯片都是 .mask 容器宽度的 100%。

还需要调整#slides .slide 元素的宽度，例如 16.6666% 以防 6 张幻灯片。 （即容器的六分之一）