CSS Slider不断破坏

时间:2018-03-11 01:42:40

标签: html css

我正在尝试仅使用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>

我该怎么做?

1 个答案:

答案 0 :(得分:0)

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

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

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

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

img

完整示例here