Create a Simple Image Slide Show using jQuery

I have seen a lot of users requesting for simple jQuery scripts for SlideShows. I saw a couple of them, but the scripts assumed that the number of image tags has to be fixed beforehand.

Update: There is a updated version of this article at Simple Image SlideShow using jQuery

I thought of making an attempt at a real simple SlideShow script using jQuery. Here’s what I came up with 5 lines of jQuery code. The images have been added to a ‘images’ folder kept at the root. The images has been defined in an array which can be retrieved from a server. For simplicity sake, I have harcoded the images paths, however the script functionality can adapt dynamically to the number of images in the array.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
title>Simple Slide Show with jQuery</title>
<
script type='text/javascript'
src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js'>
</
script>
<
script type="text/javascript">
var
imgs = [
'images/emo.jpg',
'images/icon068.gif',
'images/icon260.jpg'];
var cnt = imgs.length;

$(function() {
setInterval(Slider, 3000);
});

function Slider() {
$('#imageSlide').fadeOut("slow", function() {
$(this).attr('src', imgs[(imgs.length++) % cnt]).fadeIn("slow");
});
}
</script>
</
head>
<
body>
<
img id="imageSlide" alt="" src="" />
</
body>
</
html>

The code is not perfect but will give you an idea of how to extend this sample to suit your own requirements. You can see a Live Demo here.



Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal

35 comments:

dotnetchris said...

On your demo page you probably should put a message to say it might take a few moments to load, I almost closed it after staring at a blank page figuring something was horribly broken

Suprotim Agarwal said...

Thanks for your comments Chris..Will keep that in mind

Anonymous said...

Wouldn't it be simpler to not hard-code the images in the script so that I wouldn't have to wonder how to edit the script so that it dynamically changes to the number of images in the images folder...

pmc94 said...

One Comment then a few Questions

Comment: Thanks a lot! I've been looking for a simple slide show.

Question1: How do I modify your code to force my images to auto center on the web page?

Question2: How can I force the slide show to stop after one full cycle?

Question3: How could I modify your code (or add code) to force this slide show page to redirect to another page when one slide show cycle is complete?

Can you assist?

Anonymous said...

It does not work!
It doesn't show the images.

Nihar said...

It is not working!!

Suprotim Agarwal said...

Did you check the demo? It does work. Just wait for a few seconds and the demo shows up.

Anonymous said...

It's Working ...
thnx

john murimi said...

your code works perfectly for my project,my client almost went through the roof..
thanks so much!

stevenearl said...

looks good, but demo and my page both load with "broken image" icon. Is there a way to start with image?

Suprotim Agarwal said...

Stevenearl: I have posted an updated version of this post over here http://www.devcurry.com/2010/03/simple-image-slideshow-using-jquery.html

Shaym said...

It become blank before second image fadein.... previous images shold become base when 2nd imaeg is showing so white space can be not shown

Viju said...

Shaym check the updated link in beginning of article that the author has put

Home Remedies said...

Thanks for the script.

Rabiul Mahtab said...

Thank you very much...

Salman Miyan said...

pls if u give the idea to retrived images from my asp.net website with jquery from my sql server database dynamically

Anonymous said...

this code helped us a lot.. thank u so much.......

Eiman said...

hi
how can i read the images from sql database and then view them in the image slider ?

Could u help please

Thanks

Derya Baykal said...

Thanks.... Nice post Giochi

Ayurvedic Beauty Tips said...

Thanks for the useful script. It is really helpful.

Walter said...

That Code is simple and very very cool!
Thanks!

Gokul said...

thanks.. simple and good..

Anonymous said...

its really really simple and nice script, i really like this work, its so nice that for the beginners,



Ram Prasash said...

Thank you so much!

I just wanna know whether we could embed a close button on this slideshow?

Thanks

Rachita Joshi said...

I had been looking for a simple and clean code. Thank you so much for posting!

Suprotim Agarwal said...

Glad to hear that Rachita!

Marty Roberts said...

Thanks for posting this - I am a real newbie. Can you tell me more specifically how to get my images into the slideshow?

Rumman said...

I want to know how instead of giving own images path i can use the dynamic path based on the user selection. I am doing code behind in c# and based on some calculation i am getting the image and i want to use that value to show the image, how can i pass the value from c# to jquery ?

gurunathan natarajan said...

Thank's for your simple code .
but image show in left corner...
i want to change the image to center of the web page with text alternate change with each image.need your help ..?

Directions said...

Thank you for the code, i wish i could add this text content.
Directions

Bill said...

My Images are on a server, not locally and often load 2-3 times (Chrome & Firefox) before doing next pic.Please advise.

Bill
New York

mehul patel said...

how to add imageslider tool in visual studio 2012

AmiT Kadam said...

Thanks allot....
Actually I was searching for Image slider...
Many other website provides software...
I was really thankful
for the code of slider....

I am implimenting it on vilasdighe.in

Satish Sinha said...

gr8......thanks..its working very well

saravanan m said...

Nice slider and also i find another one simple slider jquery. Both Sliders are more useful.
http://tutstech.com/simple-slider-jquery/