I have a slideshow I found: https://www.w3.org/Style/Examples/007/slideshow.en.html (It’s Slideset6)

The main difference is my version cycles through 5 slides and the example cycles through 3.

What I am seeing is the slideshow cycles through all 5 slides, then when it starts over it starts on slide 3 instead of slide 1 and never shows slides 1-2 after that. Each additional time it cycles through the show, it’s the same behavior. First slides 1-5, then slides 3-5, slides 3-5, slides 3-5, etc.

The 12s is how long it’s staying on each slide and each slide is delayed by 4s, so for each additional slide I added 4s. This all seems right to me.

My code looks like:

<div id="slides">
    <div>
        <img src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=752&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
        <p>Beautiful</p>
    </div>
    <div>
        <img src="https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?w=750&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
        <p>Amazing</p>
    </div>
    <div>
        <img src="https://images.unsplash.com/photo-1498753427761-548428edfa67?w=889&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
        <p>Incredible</p>
    </div>
    <div>
        <img src="https://images.unsplash.com/photo-1715553176007-31923bd14f78?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
        <p>Wonderful</p>
    </div>
    <div>
        <img src="https://images.unsplash.com/photo-1715314117855-3f070860d47f?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
        <p>Sweet</p>
    </div>
</div>

The CSS:

/* Slides */
#slides {
    max-width: 700px;
    position: relative;
    width: 100%;
}

#slides > * {
    animation: 12s autoplay infinite linear;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;  
}

/* Animation */
@keyframes autoplay {
    0% {
        opacity: 0;
    }
    4% {
        opacity: 1;
    }
    33.33% {
        opacity: 1;
    }
    37.33% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

#slides > *:nth-child(1) {
    animation-delay: 0s;
}

#slides > *:nth-child(2) {
    animation-delay: 4s;
}

#slides > *:nth-child(3) {
    animation-delay: 8s;
}

#slides > *:nth-child(4) {
    animation-delay: 12s;
}

#slides > *:nth-child(5) {
    animation-delay: 16s;
}

#slides p {
    background: #ff0000;
    bottom: 0;
    color: #fff;
    font-size: 1.5rem;
    margin: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    transform: scale(-1);
    writing-mode: vertical-rl;
}

Any help is appreciated!

Thanks,
Josh