How to create fade effect image slideshow using CSS

You can give fade effect animation for image slideshow using CSS. @keyframes 'at' rule and animation keyword in CSS can be used to make image slideshow with fade effect. With @keyframes 'at' rule, you can define the properties that will be animated in an animation rule and animation keyword to set all of the animation properties.

Here I have used different types of animation properties like animation-name, animation-duration, animation-timing-function and animation-iteration-count. Where animation-name specifies name of the animation, animation-duration specifies animation duration in second(s) or milisecond(ms), animation-timing-function specifies how the animation will play like ease, ease-in, ease-in-out, ease-out and linear and animation-iteration-count:number of times animation should play.

Simple fade effect image slideshow

Here is a sample CSS code for creating simple fade effect image slideshow written for safari browser.

<style type="text/css">
@-webkit-keyframes fade{
from {opacity:.5;}
50% {opacity:1;}
to {opacity:.5;}
}
#anim1 {-webkit-animation-name:fade;-webkit-animation-duration:5s;
-webkit-animation-iteration-timing-function:linear;
position:relative;-webkit-animation-iteration-count:infinite;}
</style>

Here is a full HTML code along with required JavaScript code for creating simple fade effect image slideshow.

<head>
<title>CSS Animations</title>
<style type="text/css">
@-webkit-keyframes fade{
from {opacity:.5;}
50% {opacity:1;}
to {opacity:.5;}
}
@-moz-keyframes fade{
from {opacity:.5;}
50% {opacity:1;}
to {opacity:.5;}
}
@-o-keyframes fade{
from {opacity:.5;}
50% {opacity:1;}
to {opacity:.5;}
}
@-ms-keyframes fade{
from {opacity:.5;}
50% {opacity:1;}
to {opacity:.5;}
}
#anim1 {-webkit-animation-name:fade;-webkit-animation-duration:5s;
-webkit-animation-iteration-timing-function:linear;position:relative;
-webkit-animation-iteration-count:infinite;-moz-animation-name:fade;
-moz-animation-duration:5s;-moz-animation-iteration-timing-function:linear;
-moz-animation-iteration-count:infinite;-o-animation-name:fade;
-o-animation-duration:5s;-o-animation-iteration-timing-function:linear;
-o-animation-iteration-count:infinite;-ms-animation-name:fade;
-ms-animation-duration:5s;-ms-animation-iteration-timing-function:linear;
-ms-animation-iteration-count:infinite;}
</style>
<script language="JavaScript">
var i = 0;
var path = new Array();
 
// LIST OF IMAGES
path[0] = "image1.jpg";
path[1] = "image2.jpg";
path[2] = "image3.jpg";

function swapImage1()
{
   document.slide.src = path[i];
   if(i < path.length - 1) i++; else i = 0;
   setTimeout("swapImage1()",5000);
}
window.onload=swapImage1;
</script>
</head>
<body>
<div id="anim1"><img height="400" name="slide" src="image_1.gif" width="600" />
</div>
</body>
</html>

In the above code prefixes -webkit-, -moz-, -o-, -ms- are used for browsers safari, firefox, opera and internet explorer respectively.

Here is a preview of image slideshow for the code above.

Fade effect image slideshow with caption

You can add caption for this slideshow by adding following JavaScript codes within <script> tag.

// LIST OF CAPTİONS  

caption[0] = "Caption for the first image"; 

caption[1] = "Caption for the second image"; 

caption[2] = "Caption for the third image";   

function swapImage(){ 

var el = document.getElementById("mydiv"); 

el.innerHTML=caption[i]; 

var img= document.getElementById("anim1"); 

img.src= image[i];  

if(i <k ) { i++;}  

else  { i = 0; }

For details on adding caption on image slideshow visit the post: How To Create Simple Image Slideshow Using JavaScript ?

Fade effect image slideshow with caption and link

You can add caption for this slideshow by adding following JavaScript codes within <script> tag.

var link= new Array();   

link[0] = "http://www.siteforinfotech.com/"; 
link[1] = "http://www.siteforinfotech.com/p/tutorial.html"; 
link[2] = "http://www.siteforinfotech.com/p/mcqs.html";   
      

function swapImage(){ 

var el = document.getElementById("mydiv"); 

el.innerHTML=caption[i]; 

var img= document.getElementById("anim1"); 

img.src= image[i]; 

var a = document.getElementById("link"); 
a.href= link[i];  

if(i <k ) { i++;}  

else  { i = 0; }

For details on adding caption and link on image slideshow visit the post: How to Create JavaScript Image Slideshow with Links

A33a

Search This Blog

Healthcare Systems Article Category