纯CSS滑块动画

我需要一些帮助 我想制作一个幻灯片，在那里你可以添加任意多的图片。 但问题是，我的滑块动画不能处理三张以上的图片而不看起来很糟糕

这是我的密码

.slides{
宽度：600px；
高度：300px；
保证金：0px自动；
溢出：隐藏；
边界半径：10px；
}
.slidesContainer{
宽度：2400像素；
-webkit动画：幻灯片8s轻松无限；
}
.幻灯片.幻灯片{
宽度：600px；
高度：300px；
浮动：左；
}
.幻灯片分区：第n个类型（1）{
背景:#ff8330；
}
.幻灯片分区：第n个类型（2）{
背景#30ff83；
}
.幻灯片分区：第n个类型（3）{
背景#3083ff；
}
.幻灯片分区：第n个类型（4）{
背景#3083ff；
}
@-webkit关键帧幻灯片{
15% {
左边距：0px；
}
30% {
左边距：0px；
}
45% {
左边距：-600px；
}
60% {
左边距：-600px；
}
75% {
左边距：-1200px；
}
90% {
左边距：-1200px；
}
105% {
左边距：-1800px；
}
120% {
左边距：-1800px；
}
135% {
左边距：0px；
}
}

---

试试这个，您可以添加任意数量的幻灯片，只需在此处为每个图像添加延迟，如：

---

如果你有5个图像，css将是（5x4=20s延迟）

---

如果你有6个图像css将是（6x4=24s延迟）

---

body{背景：#eee；}
.滑块{
利润率：10px自动；
宽度：500px；
高度：320px；
溢出：隐藏；
位置：相对位置；
}
.照片{
位置：绝对位置；
-webkit动画：第16轮无限；
不透明度：0；
宽度：100%；
}
@-webkit关键帧围绕{
25%{不透明度：1；}
40%{不透明度：0；}
} 
img:n个子（4）{-webkit动画延迟：0s；}
img:n子（3）{-webkit动画延迟：4s；}
img:n子（2）{-webkit动画延迟：8s；}
img:n个子（1）{-webkit动画延迟：12s；}

谢谢你的回答，但我需要一个自动运行的滑块。非常感谢你的工作，但它不会自动为我运行？谢谢！我想这对我很有帮助lot@Berchtesgaden很乐意帮忙，如果答案对你有帮助，你可以接受！这将帮助我帮助这里的其他人！

img:nth-child(5){-webkit-animation-delay:20s;}

img:nth-child(6){-webkit-animation-delay:24s;}