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个全宽儿童。如果您添加幻灯片，请增加该值，例如6张幻灯片的600％，每张幻灯片都是.mask容器宽度的100％。

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

纯css滑块 - 为什么图像以块显示？

2 个答案: