Slideshow animation bug - html

Question

I have slideshow on my page, but I have small bug in animation and I can't find it.
I use slideshow according to this tutorial: https://www.youtube.com/watch?v=TzAshjkhFQw .
But I want to have only 3 slides not 4.
First 3 slides are ok, but instead of the fourth there is an empty background. I want only 3 slides and after that repeat slideshow.
/* Slider */
.slider {
display: block;
height: 100%;
width: 100%;
z-index: -1;
background-color: #1f1f1f;
overflow: hidden;
position: absolute;
top: 0px;
right: 0px;
border-bottom: 10px solid rgb(121, 0, 0);
}
.slider > * {
position: absolute;
display: block;
width: 100%;
height: 100%;
background-color: #1f1f1f;
animation: slide 12s infinite;
overflow: hidden;
}
.slide:nth-child(1) {
left: 0%;
animation-delay: -1s;
background-image: url(img/slide1.jpg);
background-size: cover;
background-position: center;
}
.slide:nth-child(2) {
left: 100%;
animation-delay: 2s;
background-image: url(img/slide2.png);
background-size: cover;
background-position: center;
}
.slide:nth-child(3) {
left: 100%;
animation-delay: 5s;
background-image: url(img/slide3.jpg);
background-size: cover;
background-position: center;
}
.slide p {
font-size: 2rem;
text-align: center;
display: inline-block;
width: 100%;
margin-top: 340px;
color: #fff;
}
#keyframes slide {
0% { left: 100%; width: 100%; opacity: 1;}
5% { left: 0%;}
25% { left: 0%;}
30% { left: -100%; width: 100%; opacity: 1;}
30.0001% { left: -100%; width: 0%; opacity: 0;}
100% { left: 100%; width: 0%; opacity: 0;}
}
<div class="slider">
<div class="slide">
<p>Slide1</p>
</div>
<div class="slide">
<p>Slide2</p>
</div>
<div class="slide">
<p>Slide3</p>
</div>
</div>
Thank you in advance for your advice!

Answer 1

You need to change the percentages in the animations as well as the timings on the individual slides
#keyframes slide {
0% { left: 100%; width: 100%; opacity: 1;}
6.667% { left: 0%;}
33.334% { left: 0%;}
40% { left: -100%; width: 100%; opacity: 1;}
40.0001% { left: -100%; width: 0%; opacity: 0;}
100% { left: 100%; width: 0%; opacity: 1;}
}
.slide:nth-child(2) {
animation-delay: 3s;
}
.slide:nth-child(3) {
animation-delay: 7s;
}
The animation was initially designed for 4 slides in 12 seconds, i.e. one slide every 3 seconds. If you want to change that to one slide every 4 seconds, you need to space the animations further apart (change the animation delay), and also change the animation so that the slide is visible for a longer time (multiply each percentage by 4/3).
This way of animating slides seems really inflexible however, so you might want to look at some other approach, which allows you to add or remove slides more easily.