Did you find this useful?
Socialize it today.


Create a Simple Slideshow using jQuery

Tuesday, March 26, 2013

Slideshows are quite common on sites that have pictures and other images that need to be displayed to your visitors. Using jQuery, you can build a very simple slideshow using just a few lines of jQuery code. In this tutorial, we will go over a simple slideshow example built with jQuery. Feel free to use the example code shown below and build upon it so you can add more sophisticated components for you slideshow. Using the example below, you can control how many images are included in the show, the duration of each slide, as well as the fading in and out speed between images.

demo

The HTML

The only HTML code needed is a simple <div> containing all of your <img /> (image) elements. Here is an example...

<div id="slideshow-container">
   <img class="slides" src="images/image1.jpg" />
   <img class="slides" src="images/image2.jpg" />
   <img class="slides" src="images/image3.jpg" />
</div>


The CSS

There is very little CSS code that needs to be applied to our slideshow container and its child elements. The following CSS markup sets the parent container's position to relative so that we can set absolute positioning on the image elements within the parent container. Then, set the images to display equal to 'none'. The images will be faded in and out using jQuery.

<style>
  #slideshow-container {position:relative;}
  #slideshow-container img.slides {position:absolute;top:0;left:0;display:none;}
</style>


The jQuery

As you can see in the example below, there is not much jQuery code needed for this example. The first four lines are used to set up our variables. imgDuration is used to set the amount of time (in milliseconds) the image will be displayed. fadeSpeed is used to control (in milliseconds) the amount of time the fadeIn and fadeOut effect lasts. The container variable is used to capture the 'slideshow-container' object (the div element containing the images). And the curIndex variable is used to keep track of which image element we are working with.

The function called slideShow() is where the magic happens. There are only three lines of code. The first line fades out the current image, while the second line fades in the next image. You will notice that we are using a conditional operator in the second line. We use the conditional operator (much like an if..then..else block) to determine what to do based on the current image. If we are in the last image, we reset the curIndex variable back to '0' to start the process all over again. Here is the jQuery code...

<script>
var imgDuration = 5000;
var fadeSpeed = 2000;
var container = $('#slideshow-container');
var curIndex = -1;

function slideShow() {
 container + $('img.slides').eq(curIndex).fadeOut(fadeSpeed);
 container + $('img.slides').eq(curIndex  = curIndex < container.children().length - 1 ? curIndex + 1 : 0).fadeIn(fadeSpeed);
 setTimeout("slideShow()", imgDuration);
}

slideShow();
</script>

Here is more information about how the conditional operator works.

result = condition ? expression1 : expression2;

is equivalent to...
 
if (condition) {
   result = expression1;
} else {
   result = expression2;
}


Complete Example

demo


<!DOCTYPE html>
<html>
<head>
  <title>Slideshow Demo</title>
<style>
  #slideshow-container {position:relative;}
  #slideshow-container img {position:absolute;top:0;left:0;display:none;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>

<body>
<div id="slideshow-container">
   <img class="slides" src="images/image1.jpg" />
   <img class="slides" src="images/image2.jpg" />
   <img class="slides" src="images/image3.jpg" />
</div>

<script>
var imgDuration = 5000;
var fadeSpeed = 2000;
var container = $('#slideshow-container');
var curIndex = -1;

function slideShow() {
 container + $('img.slides').eq(curIndex).fadeOut(fadeSpeed);
 container + $('img.slides').eq(curIndex  = curIndex < container.children().length - 1 ? curIndex + 1 : 0).fadeIn(fadeSpeed);
 setTimeout("slideShow()", imgDuration);
}

slideShow();
</script>
</body>
</html>


Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

HTML CSS and JavaScript Editor Professional jQuery JavaScript and jQuery: The Missing Manual