Question

我正在尝试仅使用HTML和CSS构建此滑块。我想知道我做错了什么不能让它像任何普通滑块一样显示。图像在那里，但是它们占据整个页面（并且它们堆叠）但它转换得很好：

@keyframes slider {
  0% {
    left: 0;
  }

  20% {
    left: 0;
  }

  25% {
    left: -100%;
  }

  45% {
    left: -100%;
  }

  50% {
    left: -200%;
  }

  70%{
    left: -200%;
  }

  75% {
    left: -300%;
  }
  95% {
    left: -300%;
  }

  100% {
    left: -400%;
  }
}
.slider{
  overflow: hidden;
  max-width: 100%
}

.slider figure img{
  float: left;
  width: 20%;
}

.slider figure{
  position: relative;
  width: 500%;
  margin: 0;
  animation: 20s slider infinite;
}

<div class="slider">
  <figure>
    <img src="images/JonathanJoestar.jpg">
    <img src="images/JosephJoestar.jpg">
    <img src="images/JotaroKujo 3.jpg">
    <img src="images/JosukeHigashikata.jpg">
    <img src="images/GiornoGiovanna.jpg">
    <img src="images/JolyneCujoh.jpg">
    <img src="images/JonnyJoestar.jpg">
    <img src="images/JosukeHigashikata(8).jpg">
  </figure>
</div>

我该怎么做？

Answer 1

由于溢出，你的一些img正在包装。

figure的宽度为500％，每个img的宽度为20％，因此每个img都有100％（20/100 * 500％），这意味着{{} 1}}在开始包装其内容之前只能有5 figure个。

我根据你的代码创建fiddle（由于高度不同，包装可能有点奇怪）。如果您将img和figure的宽度更改为1000％和10％（现在img可以有10 figure s），则可以使用这个小提琴。

如果你不想处理这个烂摊子。我建议你使用Flexbox。

img

完整示例here。

CSS Slider不断破坏

1 个答案: