html - 添加 6 张照片后 CSS Image Slider 不工作

Question

我正在使用来自以下网站的响应式 CSS 图像 slider : https://codepen.io/dudleystorey/pen/ehKpi

当我使用 2、4 或 5 张图片时效果很好。然而，当我尝试使用 6 张照片时，第一张和最后一张照片堆叠在一起，最后一张幻灯片完全空白，并且它们之间的所有幻灯片下面都有空白。

下面是我修改后的CSS代码:

@keyframes slidy{
0% { left: 0%; }
9.09% { left: 0%; }
18.18% { left: -100%; }
27.27% { left: -100%; }
36.36% { left: -200%; }
45.45% { left: -200%; }
54.54% { left: -300%; }
63.63% { left: -300%; }
72.72% { left: -400%; }
81.81% { left: -400%; }
90.90% { left: -500%; }
100% { left: -500%; }
}
.slide {
margin: 0 auto ;
max-width: 700px;
overflow: hidden;
border-style: solid;
border-width: 5px;
border-color: #f6a51c;
}
.slide figure {
position: relative;
width: 500%;
margin: 0 auto;
animation: 30s slidy infinite;
}
.slide figure img {
width: 20%;
float: left;
}

以下是我修改后的HTML代码:

<div class="slide">
<figure>
<img src="http://inmodemd.com/images/bodyfx-ba1.jpg" alt="" />
<img src="http://inmodemd.com/images/bodyfx-ba2.jpg" alt="" />
<img src="http://inmodemd.com/images/bodyfx-ba3.jpg" alt="" />
<img src="http://inmodemd.com/images/bodyfx-ba4.jpg" alt="" />
<img src="http://inmodemd.com/images/bodyfx-ba5.jpg" alt="" />
<img src="http://inmodemd.com/images/bodyfx-ba6.jpg" alt="" />
</figure>
</div>

Answer 1

您的图像占 20%，总宽度最大值为 700，您正试图挤进该百分比。 5 是您的最大值，因为每个图像都是 100% 宽度的 20%。 20 x 5 是 100. 6/100 = 16.66666 ，这意味着您的图像不会 100% 适合。虽然不错的 slider 。希望这可以帮助。