Image Slider wird unsichtbar nach dem letzten Bild?

Question

Also ich habe einen Bildregler und es funktioniert ... irgendwie. Mein Problem liegt darin, dass ich 3 Bilder habe. Der Slider gleitet durch diese Bilder, aber wenn er vom dritten Bild (dem letzten) wegrutscht, verschwindet er einfach, aber dann gleitet er wieder zum ersten Bild zurück? Ich brauche es, damit es von der letzten zur ersten übergeht, anstatt für eine Pause unsichtbar zu bleiben. Hier ist mein Code für sie zur Zeit:

#imgslide { 
 
    width: 550px; 
 
    height: 300px; 
 
    border-radius: 10px; 
 
    position: relative; 
 
    top: 25%; 
 
    left: 50%; 
 
    margin-top: -150px; 
 
    margin-left: -225px; 
 
    overflow: hidden; 
 
} 
 
#imgslide figure img { 
 
    width: 20%; 
 
    float: left; 
 
} 
 
#imgslide figure { 
 
    position: relative; 
 
    width: 500%; 
 
    margin: 0; 
 
    left: 0; 
 
    text-align: left; 
 
    font-size: 0; 
 
    animation: 15s slidy infinite; 
 
} 
 
/* Keyframes */ 
 

 
@keyframes slidy { 
 
    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%; 
 
    } 
 
}

<div id="imgslide"> 
 
    <figure> 
 
    <img src="http://www.indraneelghosh.com/img/sport/sport_318_test-201.gif" alt=""> 
 
    <img src="http://www.indraneelghosh.com/img/sport/sport_318_test-201.gif" alt=""> 
 
    <img src="http://www.indraneelghosh.com/img/sport/sport_318_test-201.gif" alt=""> 
 
    </figure> 
 
</div>

Answer 1

versuchen diese

#imgslide { 
 
    width: 450px; 
 
    height: 300px; 
 
    border-radius: 10px; 
 
    position: relative; 
 
    top: 25%; 
 
    left: 50%; 
 
    margin-top: 100px; 
 
    margin-left: -225px; 
 
    overflow: hidden; 
 
} 
 
#imgslide figure img { 
 
    width: 20%; 
 
    float: left; 
 
} 
 
#imgslide figure { 
 
    position: relative; 
 
    width: 500%; 
 
    margin: 0; 
 
    left: 0; 
 
    text-align: left; 
 
    font-size: 0; 
 
    animation: 15s slidy infinite; 
 
} 
 
/* Keyframes */ 
 

 
@keyframes slidy { 
 
    0% { 
 
    left: 0%; 
 
    } 
 
    20% { 
 
    left: 0%; 
 
    } 
 
    25% { 
 
    left: -100%; 
 
    } 
 
    45% { 
 
    left: -100%; 
 
    } 
 
    50% { 
 
    left: -200%; 
 
    } 
 
    70% { 
 
    left: -200%; 
 
    } 
 
    75% { 
 
    left: 0%; 
 
    } 
 
}

<div id="imgslide"> 
 
    <figure> 
 
    <img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt=""> 
 
    <img src="http://demosthenes.info/assets/images/taj-mahal.jpg" alt=""> 
 
    <img src="http://demosthenes.info/assets/images/ankor-wat.jpg" alt=""> 
 
    </figure> 
 
</div>

Answer 2

Ihre Bilder nur 60% der Füllraum (3x 20%), fügen Sie 2 weitere Bilder Raum zu füllen oder um Ihre Bilder zu 33,33% von strecken Breite und Zahl auf 300% (Animation auf 0%, 100% und 200% einstellen)