图滑块 "Stacks"

Question

我正在尝试制作一个 响应式 CSS 图片滑块 ，但当我在 <figure> 中放置超过 5 张图片时遇到了问题堵塞。例如，当我有 8 张图像要放入帧块时，第 6、第 7 和第 8 张图像字面上低于第 1、第 2、第 3、第 4 和第 5 张图像（非常奇怪的问题）。这是我正在谈论的内容的更好表示：

我是 Dirty Bomb 游戏的粉丝，我正在尝试为它制作一个 fan-site。我希望所有 HD Dirty Bomb 背景成为我的滑块的一部分，但遇到了很多麻烦。这是它的样子：

http://imgur.com/a/Gt3WD

这是滑块的代码（有效但第 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% / images count（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; 
}

图滑块 "Stacks"

Figure Slider "Stacks"

html

css

stack

figure

HTML

CSS