I'm encountering a small bug in the animation of my slideshow on the webpage and I can't seem to locate it. I followed a tutorial for the slideshow from this link: https://www.youtube.com/watch?v=TzAshjkhFQw. However, I only want to display 3 slides instead of 4. The first 3 slides work fine, but the fourth slide displays as an empty background. I want the slideshow to loop after the third slide.
/* 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>Any guidance or suggestions on how to fix this issue would be greatly appreciated!