jQuery slideshow - cute and simple!

SheoNarayan
Posted by in jQuery category on for Beginner level | Points: 250 | Views : 19892 red flag
Rating: 5 out of 5  
 2 vote(s)

In this article, I shall show how to create a simple slideshow using jQuery in web page.


 Download source code for 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.

Page copy protected against web site content infringement by Copyscape

About the Author

SheoNarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com
Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Posted by: Raja on: 12/1/2010 | Points: 25
Really cute and simple, very compact. Keep it up!
Posted by: Susanthampy on: 6/23/2011 | Points: 25
Hi Sheo,

Nice one
Posted by: Diana on: 10/15/2012 | Points: 25
Thank you, It is really nice and works perfectlly!

Login to post response

Comment using Facebook(Author doesn't get notification)