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, ASP.NET Architecture MVP 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 has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal

comments

32 Responses to "Create a Simple Image Slide Show using jQuery"
  1. dotnetchris said...
    August 5, 2009 at 10:53 AM

    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

  2. Suprotim Agarwal said...
    August 5, 2009 at 10:49 PM

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

  3. Anonymous said...
    August 29, 2009 at 11:12 AM

    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...

  4. pmc94 said...
    September 4, 2009 at 9:45 PM

    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?

  5. Anonymous said...
    October 8, 2009 at 6:12 AM

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

  6. Nihar said...
    October 8, 2009 at 6:13 AM

    It is not working!!

  7. Suprotim Agarwal said...
    October 8, 2009 at 11:40 AM

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

  8. Anonymous said...
    February 3, 2010 at 2:57 AM

    It's Working ...
    thnx

  9. john murimi said...
    March 2, 2010 at 12:36 AM

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

  10. stevenearl said...
    March 22, 2010 at 8:18 AM

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

  11. Suprotim Agarwal said...
    March 23, 2010 at 9:52 AM

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

  12. Shaym said...
    April 21, 2010 at 1:49 AM

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

  13. Viju said...
    April 21, 2010 at 2:18 AM

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

  14. Home Remedies said...
    August 16, 2010 at 12:55 AM

    Thanks for the script.

  15. Rabiul Mahtab said...
    August 16, 2010 at 3:21 AM

    Thank you very much...

  16. Salman Miyan said...
    November 30, 2010 at 9:58 PM

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

  17. Anonymous said...
    May 3, 2011 at 12:19 AM

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

  18. Eiman said...
    May 10, 2011 at 2:33 AM

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

    Could u help please

    Thanks

  19. Derya Baykal said...
    July 2, 2011 at 3:23 PM

    Thanks.... Nice post Giochi

  20. Ayurvedic Beauty Tips said...
    September 8, 2011 at 5:19 AM

    Thanks for the useful script. It is really helpful.

  21. Walter said...
    June 20, 2012 at 7:54 PM

    That Code is simple and very very cool!
    Thanks!

  22. Gokul said...
    July 15, 2012 at 1:32 AM

    thanks.. simple and good..

  23. Anonymous said...
    January 11, 2013 at 1:44 AM

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



  24. Ram Prasash said...
    February 4, 2013 at 10:17 PM

    Thank you so much!

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

    Thanks

  25. Rachita Joshi said...
    March 5, 2013 at 2:15 PM

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

  26. Suprotim Agarwal said...
    March 5, 2013 at 5:55 PM

    Glad to hear that Rachita!

  27. Marty Roberts said...
    March 14, 2013 at 2:58 PM

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

  28. Rumman said...
    June 30, 2013 at 12:25 AM

    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 ?

  29. gurunathan natarajan said...
    July 26, 2013 at 9:29 PM

    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 ..?

  30. Directions said...
    September 11, 2013 at 10:39 AM

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

  31. Bill said...
    December 9, 2013 at 2:16 PM

    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

  32. mehul patel said...
    July 31, 2014 at 12:15 AM

    how to add imageslider tool in visual studio 2012

 

Copyright © 2009-2014 All Rights Reserved for DevCurry.com by Suprotim Agarwal | Terms and Conditions