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.

34 comments:

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

    ReplyDelete
  2. Suprotim AgarwalAugust 5, 2009 at 10:49 PM

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

    ReplyDelete
  3. AnonymousAugust 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...

    ReplyDelete
  4. joe.kinslowSeptember 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?

    ReplyDelete
  5. AnonymousOctober 8, 2009 at 6:12 AM

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

    ReplyDelete
  6. NiharOctober 8, 2009 at 6:13 AM

    It is not working!!

    ReplyDelete
  7. Suprotim AgarwalOctober 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.

    ReplyDelete
  8. AnonymousFebruary 3, 2010 at 2:57 AM

    It's Working ...
    thnx

    ReplyDelete
  9. john murimiMarch 2, 2010 at 12:36 AM

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

    ReplyDelete
  10. stevenearlMarch 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?

    ReplyDelete
  11. Suprotim AgarwalMarch 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

    ReplyDelete
  12. ShaymApril 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

    ReplyDelete
  13. VijuApril 21, 2010 at 2:18 AM

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

    ReplyDelete
  14. Home RemediesAugust 16, 2010 at 12:55 AM

    Thanks for the script.

    ReplyDelete
  15. Rabiul MahtabAugust 16, 2010 at 3:21 AM

    Thank you very much...

    ReplyDelete
  16. Salman ansariNovember 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

    ReplyDelete
  17. AnonymousMay 3, 2011 at 12:19 AM

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

    ReplyDelete
  18. swalfiMay 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

    ReplyDelete
  19. Ayurvedic Beauty TipsSeptember 8, 2011 at 5:19 AM

    Thanks for the useful script. It is really helpful.

    ReplyDelete
  20. WalterJune 20, 2012 at 7:54 PM

    That Code is simple and very very cool!
    Thanks!

    ReplyDelete
  21. GokulJuly 15, 2012 at 1:32 AM

    thanks.. simple and good..

    ReplyDelete
  22. AnonymousJanuary 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,



    ReplyDelete
  23. Ram PrasashFebruary 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

    ReplyDelete
  24. UnknownMarch 5, 2013 at 2:15 PM

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

    ReplyDelete
  25. Suprotim AgarwalMarch 5, 2013 at 5:55 PM

    Glad to hear that Rachita!

    ReplyDelete
  26. Marty RobertsMarch 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?

    ReplyDelete
  27. RummanJune 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 ?

    ReplyDelete
  28. UnknownJuly 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 ..?

    ReplyDelete
  29. DirectionsSeptember 11, 2013 at 10:39 AM

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

    ReplyDelete
  30. BillDecember 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

    ReplyDelete
  31. UnknownJuly 31, 2014 at 12:15 AM

    how to add imageslider tool in visual studio 2012

    ReplyDelete
  32. Amit KadamApril 30, 2015 at 9:21 AM

    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

    ReplyDelete
  33. UnknownMay 7, 2015 at 4:40 AM

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

    ReplyDelete
  34. Before GetJune 11, 2015 at 11:12 AM

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

    ReplyDelete