CODEWITHSUNDEEP
htmlcss
Cristian Beu
Cristian Beu

Reputation: 59

How to stop css image slideshow at last image?

I have a slideshow with 3 images with different texts and I want to stop the autoplay at the last photo, so the last message/image will not fade out and dissapear. Here is the code:

HTML part:

<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 part:

 .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; }
}

Upvotes: 2

Views: 1887

Answers (1)

Peanut
Peanut

Reputation: 3963

You can introduce a second fade-animation which stays visible and apply it to the last slide:

.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: fade2 12s 8s; -webkit-animation-fill-mode:forwards; }

@-webkit-keyframes fade {
0% { opacity: 0; }
10% { opacity: 1; }
20% { opacity: 1; }
30% { opacity: 0; }
100% { opacity: 0; }
}
@-webkit-keyframes fade2 {
0% { opacity: 0; }
10% { opacity: 1; }
100% { opacity: 1; }
}

Upvotes: 4

Related Questions