How can I program a slideshow with html and css?

Question

I want to program a slideshow, or however you call a string of pics flowing from one side to another:D. My code works so far pretty fine, but I don't know how to program it that if the "string" ended, the string is put at the end so it flows continuously. You got any tips for me? And until now I'm working with keyframes and it jumps from one frame to another. What do I have to do to that it runs smoothly? (Sorry for my bad English I'm German:D)

This is the code I wrote for the animation. There is some code I didn't put on here cause it's just to format for different devices.

` slider figure img { float: left; width: 25%; }

@keyframes slider {
    0% {
        left: 0;
    }
    10% {
        left: -50%;
    }
    20% {
        left: -100%;
    }
    30% {
        left -150%;
    }
    40% {
        left: -200%;
    }
    50% {
        left: -250%;
    }
    60% {
        left: -300%;
    }
    70% {
        left: -350%;
    }
    80% {
        left: -400%;
    }
    90% {
        left: -450%;
    }
    100% {
        left: -500%;
        left: 0;
    }`

Thanks for your help guys:D

Answer 1

I see that you are programming every movement with css and keyframes. I suggest a better alternative to doing this would be https://cssanimate.com/ where you can animate with more precision.

You said that your code works fine so I assume that you're using something along with the lies of style.display = "none". If so, then you should use a delay and set the display right after the animation is played by using the setTimeout(); function. Something like this:

 setTimeout(function(){ alert("Hello"); }, 3000);

Let me know if this works!

Answer 2

I hope this will help you.

 .slideshow { overflow: hidden; height: 300px; width: 500px; margin: 0 auto; }.slide-wrapper { width: 2912px; -webkit-animation: slide 18s ease infinite; }.slide { float: left; height: 510px; width: 728px; }.slide { background: #FFC300; }.slide-number { color: #000; text-align: left; font-size: 4em; } @-webkit-keyframes slide { 20% {margin-left: 0px;} 30% {margin-left: -728px;} 50% {margin-left: -728px;} 60% {margin-left: -1456px;} 70% {margin-left: -1456px;} 80% {margin-left: -2184px;} 90% {margin-left: -2184px;} }

 <div class="slideshow"> <div class="slide-wrapper"> <div class="slide"><h1 class="slide-number">First</h1></div> <div class="slide"><h1 class="slide-number">Second</h1></div> <div class="slide"><h1 class="slide-number">Third</h1></div> <div class="slide"><h1 class="slide-number">Fourth</h1></div> <div class="slide"><h1 class="slide-number">Fifth</h1></div> </div> </div>