Css 如何正确更改此代码？

这是我第一次想使用滑动图像，我在codepen上找到了完美的幻灯片，但无法将其管理为只有2或3个图像可以滑动。找不到如何正确设置时间。它是如何工作的，如果我只需要2或3张图片在每一张图片上以4秒的时间滑动

@导入url（'https://fonts.googleapis.com/css?family=Bubblegum+无| Ubuntu’；
html，
身体{
宽度：100%；
身高：100%；
填充：0；
保证金：0；
字体系列：“Bubblegum Sans”，草书；
}
滑块{
显示：块；
宽度：100%；
身高：100%；
背景色：#1F；
溢出：隐藏；
位置：绝对位置；
}
滑块>*{
位置：绝对位置；
显示：块；
宽度：100%；
身高：100%；
背景:#1楼;；
动画：幻灯片12s无限；
溢出：隐藏；
}
幻灯片：第n个孩子（1）{
左：0；
z指数：9；
动画延迟：-1s；
背景图片：url(https://preview.ibb.co/fm57uG/img_1.jpg);
背景尺寸：封面；
背景位置：中心；
}
幻灯片：第n个孩子（2）{
动画延迟：2s；
背景图片：url(https://preview.ibb.co/kkT5gw/img_2.jpg);
z指数：8；
背景尺寸：封面；
背景位置：中心；
}
幻灯片：第n个孩子（3）{
动画延迟：5s；
背景图片：url(https://preview.ibb.co/dVT5gw/img_3.jpg);
背景尺寸：封面；
背景位置：中心；
z指数：7；
}
幻灯片：第n个孩子（4）{
左：0%；
动画延迟：8秒；
背景图片：url(https://preview.ibb.co/m7FU8b/img_4.jpg);
背景尺寸：封面；
背景位置：中心；
z指数：6；
}
幻灯片p{
字体大小：70px；
文本对齐：居中；
显示：内联块；
宽度：100%；
利润上限：340px；
颜色：#fff；
}
@关键帧滑动{
0% {
左：100%；
宽度：100%；
}
5% {
左：0%；
}
25% {
左：0%；
}
30% {
左-100%；
宽度：100%；
}
30.001% {
左-100%；
宽度：0%；
}
100% {
左：100%；
宽度：0%；
}
}

幻灯片1

幻灯片2

幻灯片3

幻灯片4

三张幻灯片的示例：

HTML

<slider>
        <slide>
            <p>Slide 1</p>
        </slide>
        <slide>
            <p>Slide 2</p>
        </slide>
        <slide>
            <p>Slide 3</p>
        </slide>
    </slider>

诀窍是跟随动画延迟。第一张幻灯片立即开始（-1s），第二张幻灯片添加4秒，得到（3s），第三张幻灯片再次添加4秒（7s），以此类推。如果需要两张幻灯片，可以从HTML中删除第三张幻灯片，并从CSS中删除第三个子幻灯片

---

注意：我只为幻灯片的孩子们放CSS，你要确保你也有其他的。

我按照你解释的那样做了，但它不像原来那样工作。。

slide:nth-child(1) {
    left: 0;
    z-index: 9;
    animation-delay: -1s;
    background-image: url(https://preview.ibb.co/fm57uG/img_1.jpg);
    background-size: cover;
    background-position: center;
}

slide:nth-child(2) {
    animation-delay: 3s;
    background-image: url(https://preview.ibb.co/kkT5gw/img_2.jpg);
    z-index: 8;
    background-size: cover;
    background-position: center;
}

slide:nth-child(3) {
    animation-delay: 7s;
    background-image: url(https://preview.ibb.co/dVT5gw/img_3.jpg);
    background-size: cover;
    background-position: center;
    z-index: 7;
}