Question

我正在使用响应式CSS图像滑块： 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％。不错的滑块。希望这可以帮助。

添加6张照片后，CSS Image Slider无法正常工作

1 个答案: