html - CSS Slider 不断崩溃

Question

我正在尝试仅使用 HTML 和 CSS 构建此 slider 。我想知道我做错了什么，没有让它像任何普通 slider 一样显示。图像在那里，但它们占据了整个页面(并且它们堆叠)但它过渡得很好:

@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%)，这意味着一个 figure 在开始包装其内容之前只能有 5 个 img。

我创建 fiddle基于您的代码(由于高度不同，包装可能有点奇怪)。如果您将 figure 和 img 的宽度更改为 1000% 和 10%(现在 figure 可以有 10 个 imgs) 它应该可以工作。

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

.slider figure img {
  width: 100%;
}

.slider figure {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin: 0;
  animation: 20s slider infinite;
}

完整示例 here .