jQuery slideshow - cute and simple!

Introduction

jQuery slideshow is very frequently asked questions in Forums so I have written this small article to show how to create slideshow in jQuery.



In order to create a slideshow in jQuery, we need to an img html tag and couple of lines of simple jQuery code.

Lets create jQuery slideshow

HTML Code

Copy-paste below code snippet in your .aspx or .html page.

<script src="../jquery-1.4.min.js" type="text/javascript"></script>
 
<div id="slider" style="width:200px;">
<p>jQuery Slide show</p>
<img id="img1" src="../images/aspnet4.gif" />
</div>

Code - 1

Above code snippet has the reference of jQuery file in script tag and an img tag with id as "img1" with default src image location that will appear when page will load.

Get solutions of your .NET problems with video explanations and source code in .NET How to's.

jQuery Code

Copy-paste below code at the last of the page (before </body>).

<script language="javascript" type="text/javascript">
var interval = 3000; // Line 1: time interval after which next image will load
 
var images = ['../images/aspnet4.gif', '../images/aspnet4css.gif', '../images/jquerycourse.gif']; // Line 2
 
var i = 1; // Line 3: default index of the image from the array that will be shown by default
 
setInterval(ChangeImages, interval); // Line 4: timer that will run after every interval
 
// function that will change the images
function ChangeImages() {
if (i == images.length) { i = 0; }

$("#img1").slideUp('slow', function () {$(this).attr('src', images[i]); i++; }).slideDown('slow');
}
</script>

Code - 2

In the above code snippet

Line 1 has the time interval specified in milliscond that will be used to show the next image.

Line 2 are images that will be shown in the slideshow. In my case I have shown just 3 images. Notice the way of writing images in the array. The image path should be written in the single quote separated by , (comma) inside square bracket.

Line 3 has the index of the default image specified into the src attribute of the img tag in the Code listing 1.

Line 4 is the function that will start the timer and will call ChangeImages function after every 3 seconds (specified in the Line 1).

At the last I have ChangeImages() function that has the logic written to change the images. In this function, line 1 will validate if the current index of the image has reached to the last image in the array and if yes, reset the index i to 0 (first image). 

The next line will find the "img1" id from the page and call slideUp() function that will slowly hide the img html element. After the image will be completely hidden, another function will be called that will set the src attribute of the img tag to the next image from the images array and then the index i will be incremented with 1. Once the next image has been set in the src attribute of the img tag, I have shown the img html element using slideDown() jQuery function.

All the images specified in the images array will repeat untill the page is closed.

Customization

If you want to customize this code, you can use hide() & show() function instead of slideUp() and slideDown() or fadeIn() and fadeOut() functions. All these jQuery functions works in the same way so you do not need to change any other code. Just replace the functions names and you are done.

Source Code

I have attached the source code of this article, please feel free to download and use it.

You can see the live demo of this slideshow here.

Conclusion

Hope this simple slideshow using jQuery was useful where we learnt how to create an simple and cute slideshow by writing few lines of code.