我正在用PHP和HTML创建一个动态网站，用于教育目的。
我一直在尝试创建一个"幻灯片"，就像这个视频中的那个。https://www.youtube.com/watch?v=L-vBR3vzOe8
然而，我一直很难设置所需的宽度和高度（太小了）。我已经玩了一个小时的代码，我不明白它。
有人好心为我指明正确的方向吗？
我的代码看起来像这样：
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;
}
#slider figure img {
width:20%;
float: left;
}
#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 20s slider infinite;
}
这是我的HTML代码：
<div id ="slider" >
<figure>
<img src ="Images/img1.jpg">
<img src ="Images/img2.jpg">
<img src ="Images/img3.jpg">
<img src ="Images/img4.jpg">
</figure>
</div>
提前谢谢。
工作样本：JSFiddle
总宽度为100%，高度为自动
您可以更改#滑块的宽度
#slider {
overflow: hidden;
width: 50%;
}
您需要更改#slider（ID为slider的div）的宽度，它是本幻灯片的容器。
最有可能：
- 滑块div所在的位置不能再大了
- 您正在使用的图像不够大
- 其他一些与造型相关的问题，可能很难检测到而不能完全访问该页面
如果您不想用这种方法创建动态页面，那么您总是需要根据图像数量更改关键帧和figure的宽度。
指向正确的方向-更快速的方法是使用像bxslider这样的现成库-这已经有很好的文档记录了。