html - 图 slider "Stacks"

Question

我正在尝试制作一个响应式 CSS 图像 slider ，但当我在 <figure> 中放置超过 5 张图像时遇到了问题堵塞。例如，当我有 8 张图像要放入框架 block 时，第 6、第 7 和第 8 张图像确实在第 1、第 2、第 3、第 4 和第 5 张图像下方(非常奇怪的问题) .这是我正在谈论的内容的更好表示:

我是 Dirty Bomb 游戏的粉丝，我正在尝试为它创建一个粉丝网站。我希望 所有 HD Dirty Bomb 背景成为我的 slider 的一部分，但遇到了很多麻烦。这是它的样子:

http://imgur.com/a/Gt3WD

下面是 slider 的代码(有效但第 6、7 和 8 张图片总是在底部!):

HTML

<div class="slider">
    <figure>
        <img src="../img/bg/naderbg.png" alt>
        <img src="../img/bg/proxybg.png" alt>
        <img src="../img/bg/fletcherbg.png" alt>
        <img src="../img/bg/bushwackerbg.png" alt>
        <img src="../img/bg/sparksbg.png" alt>
        <img src="../img/bg/kirabg.png" alt>
        <img src="../img/bg/rhinobg.png" alt>
        <img src="../img/bg/artybg.png" alt>
    </figure>
</div>

CSS

.slider{
    overflow: hidden;
}

.slider figure{
    position:absolute;
    width:500%;
    margin:0;
    left:0;
    animation: 100s slidy infinite;
}

.slider figure img{
    width:20%;
    float:left;
}

@keyframes slidy{
    0%{left:0%;}
    10%{left:0%;}
    12%{left:-100%;}
    22%{left:-100%;}
    24%{left:-200%;}
    34%{left:-200%;}
    36%{left:-300%;}
    46%{left:-300%;}
    48%{left:-400%;}
    58%{left:-400%;}
    60%{left:-300%;}
    70%{left:-300%;}
    72%{left:-200%;}
    82%{left:-200%;}
    84%{left:-100%;}
    94%{left:-100%;}
    96%{left:0%;}
}

此外，本网站中 Dudley Storey 的代码也发生了同样的事情。

如果你添加超过 5 张图片(例如你在他的代码中添加相同的图片)，第 6、7、8 等，将低于第 1、2、3 等

https://codepen.io/dudleystorey/pen/ehKpi

我一整天都在为这个问题苦苦挣扎。我一直在 YouTube、互联网和 Stack Overflow 上查看大量视频，但我就是找不到解决方案。

Answer 1

您应该将 .slider figure 的宽度设置为 100% * images count(8 张图像为 800%)并设置 .slider figure img 到 100%/图片计数(8 张图片为 12.5%):

@keyframes slidy {
  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%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img {
  width: 12.5%; 
  float: left; 
}
div#slider figure { 
  position: relative;
  width: 800%; 
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
}