CSS keyframe slideshow images not showing - html

Question

I am creating a slideshow using keyframes.
My issue lies in the fact that only the first image actually shows, the other 4 are just ignored as you can see in my snippet.
I have looked at my CSS and don't think any of it is "useless" (correct me if there is anything unnecessary) and otherwise, I am unsure why the images wouldn't show.
Here is a working snippet of what I have done so far:
carousel {
max-width: 100%;
height: 500px;
max-height: 500px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
display: block;
}
carousel img {
max-width: 100%;
width: 1920px;
height: auto;
max-height: 500px;
position: absolute;
left: 0;
top: 0;
animation: slide 20s ease-in-out infinite;
}
#keyframes slide {
0% {
left: 0;
}
100% {
left: -500%;
}
}
<carousel>
<img src="http://www.lorempixel.com/1920/1080" alt="carousel-img">
<img src="http://www.lorempixel.com/1920/1080" alt="carousel-img">
<img src="http://www.lorempixel.com/1920/1080" alt="carousel-img">
<img src="http://www.lorempixel.com/1920/1080" alt="carousel-img">
<img src="http://www.lorempixel.com/1920/1080" alt="carousel-img">
</carousel>

Answer 1

You need to manually push one image after anothe, because you have positin: absolute they are each on another , because left: 0
carousel {
max-width: 100%;
height: 500px;
max-height: 500px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
display: block;
}
carousel img {
max-width: 100%;
width: 1920px;
height: auto;
max-height: 500px;
position: absolute;
left: 0;
top: 0;
animation: slide 20s ease-in-out infinite;
}
carousel img:nth-child(2) {
margin-left: 100%;
}
carousel img:nth-child(3) {
margin-left: 200%;
}
carousel img:nth-child(4) {
margin-left: 300%;
}
carousel img:nth-child(5) {
margin-left: 400%;
}
#keyframes slide {
0% {
left: 0;
}
100% {
left: -500%;
}
}
<carousel>
<img src="http://www.lorempixel.com/1920/1080" alt="carousel-img">
<img src="http://www.lorempixel.com/1920/1080" alt="carousel-img">
<img src="http://www.lorempixel.com/1920/1080" alt="carousel-img">
<img src="http://www.lorempixel.com/1920/1080" alt="carousel-img">
<img src="http://www.lorempixel.com/1920/1080" alt="carousel-img">
</carousel>

Answer 2

The problem is because you are positioning all the images absolutely at top: 0px, left: 0px of the container (meaning, they are all one over the other) and also adding the same animation to them at the same time. Because of this all images move from left: 0% to left: -500% at the same time and so you get to see only one image.
I am not quite sure what effect you are wanting to achieve and so I'll give you two options. If what you want is a film-roll like effect then remove position: absolute oncarousel img, get them to display on the same line using white-space: nowrap on the parent and then animate parent's margin-left.
carousel {
max-width: 100%;
height: 500px;
max-height: 500px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
display: block;
white-space: nowrap;
animation: slide 20s ease-in-out infinite;
}
carousel img {
height: auto;
max-height: 500px;
}
#keyframes slide {
0% {
margin-left: 0;
}
100% {
margin-left: -500%;
}
}
<carousel>
<img src="http://www.lorempixel.com/1920/1080/nature/1" alt="carousel-img">
<img src="http://www.lorempixel.com/1920/1080/nature/2" alt="carousel-img">
<img src="http://www.lorempixel.com/1920/1080/nature/3" alt="carousel-img">
<img src="http://www.lorempixel.com/1920/1080/nature/4" alt="carousel-img">
<img src="http://www.lorempixel.com/1920/1080/nature/5" alt="carousel-img">
</carousel>
Or, if you want to achieve an effect where each image is stacked one below the other but they start to move only after the previous image (the one above it) has completely moved out then add animation-delay to each image element such that it is equal to the amount of time required for the images above it to complete their animation. Also, change animation-duration to the total amount of time required for all 5 images to complete their animation.
carousel {
max-width: 100%;
height: 500px;
max-height: 500px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
display: block;
}
carousel img {
max-width: 100%;
width: 1920px;
height: auto;
max-height: 500px;
position: absolute;
left: 0;
top: 0;
animation: slide 100s ease-in-out infinite;
}
carousel img:nth-child(1){
animation-delay: 80s;
}
carousel img:nth-child(2){
animation-delay: 60s;
}
carousel img:nth-child(3){
animation-delay: 40s;
}
carousel img:nth-child(4){
animation-delay: 20s;
}
#keyframes slide {
0% {
left: 0;
}
20% {
left: -100%;
}
}
<carousel>
<img src="http://www.lorempixel.com/1920/1080/nature/1" alt="carousel-img">
<img src="http://www.lorempixel.com/1920/1080/nature/2" alt="carousel-img">
<img src="http://www.lorempixel.com/1920/1080/nature/3" alt="carousel-img">
<img src="http://www.lorempixel.com/1920/1080/nature/4" alt="carousel-img">
<img src="http://www.lorempixel.com/1920/1080/nature/5" alt="carousel-img">
</carousel>