My slideshow consists of 3 images, each with different texts. I'm trying to figure out how to stop the autoplay feature when the last image is displayed, so it doesn't fade out and disappear. Below is the code snippet:
HTML section:
<div class="slide-container">
<img class="slide1" src="images/1banner.jpg">
<img class="slide2" src="images/2banner.jpg">
<img class="slide3" src="images/3banner.jpg">
</div>
CSS section:
.slide-container {
position: relative;
float: right;
height: 150px;
width: 950px;
background: url('banner-back2.jpg');
}
.slide-container img {
position: absolute;
top: 0;
left: 0;
height: 150px;
width: 950px;
opacity: 0;
}
.slide1 { -webkit-animation: fade 12s;}
.slide2 { -webkit-animation: fade 12s 4s;}
.slide3 { -webkit-animation: fade 12s 8s;}
@-webkit-keyframes fade {
0% { opacity: 0; }
10% { opacity: 1; }
20% { opacity: 1; }
30% { opacity: 0; }
100% { opacity: 0; }
}