Grow your CSS skills. Land your dream job.

Last updated on:

Simple Auto-Playing Slideshow

HTML

Wrapper with div's as the "slides", which can contain any content.

<div id="slideshow">
   <div>
     <img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
   </div>
   <div>
     <img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
   </div>
   <div>
     Pretty cool eh? This slide is proof the content can be anything.
   </div>
</div>

CSS

Slides need to be absolutely positioned within the wrapper. This has a tiny bit of extra pizazz:

#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

jQuery JavaScript

Run after DOM is ready.

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

See it

View Demo

Very similar one from Snook.

Comments

  1. wahh! simple code mehh. thanks ya css trick. !

  2. Iulian

    I have seen slideshows using jQuery plugins. Is there a way to add controls to this custom slideshow? It would be nice to pause and replay it…

  3. This looks an awful lot like snook’s simple jQuery slider: http://snook.ca/archives/javascript/simplest-jquery-slideshow

    • it looks like snook’s code – which is great for images – but it works for any div content – and for me simpler, easier to read and apply code – good work!

  4. Jon Spencer

    Dude. This is awesome. Love it. Thank you. Could you tell me how to add simple navigational arrows to this? It would be the perfect slider with those! :)

  5. Adrian
    Permalink to comment#

    This was a great piece, especially for users like me who are learning JQuery. Could you build on this snippet in a future tut and show us how to add controls (pagination, pause, play, etc.).

  6. It’s usefull for me, thank you very much!

  7. kirit
    Permalink to comment#

    not working in ie9. In ie9, all pictures display in left vertical bar instead of center box.

    • Anon
      Permalink to comment#

      You do realize that almost always if it’s HTML5, IE isn’t going to be able to read it…

    • Pedro Penny

      I want to thank CSS-tricks for the great Slideshow Html document. When I first tried it, I had problems making it work in IE9. I found an ERROR in following line…

      #slideshow > div {

      This line should read…

      #slideshow div {

      I now have no problems running the slideshow in Windows Vista and IE9.

  8. Cristina
    Permalink to comment#

    Love it!!! Thank you

  9. question. On the first go around the slide show seems to revert back to the last slide in between the others. Once it plays through, it seems to work itself out and plays the way you expect. Can I do anything to fix this? also your comment “Run after DOM is ready.” is greek to me…. Does this mean I need my own document Ready code in front of the Js you provide? Thank you.

    • Andy
      Permalink to comment#

      I’m having the same problem. Anybody have some wisdom to share?

    • Andrew
      Permalink to comment#

      Did anyone get back to you on your issue? I am having the same issue myself and was wondering if your problem was solved?

    • Hey Guys,

      As pointed out by ITV Teacher, even I faced the last picture reverting itself in the first cycle of the slide show. Here is the fix to it:

      – You just need to include the above JQuery Javascript within this
      $(document).ready(function(){

      // Place the JQuery Javascript here //

      });

      – If you try to run this script within the document ready then the problem seems to have been solved.

      Regards,
      JJ

    • Charles

      I must be crazy because I copied all this, I put in the body, I copied the css and put on the css stylesheet and jquery i put it on the javascript sheet and all I got was the whole things lined up on the left one on the top of EACH of other any ideas?

  10. Thanks for this Chris! It solved my problem. I hope you can also add a navigational arrows?

    Hope you can help me.

    Thanks advance and more power!

    Best,

    Val

  11. soni kaur
    Permalink to comment#

    i want exactly this but 3 slideshow in one page………so how can i do that??

    • I solved this by adding a .js and a .css file for each slideshow and editing the code to match the filename.

  12. soni kaur
    Permalink to comment#

    not working in ie6….can anybody suggest?? plzzz

    • Nick
      Permalink to comment#

      Suggestion: don’t make it work in ie6… nobody is going to view your site in ie6, and if they do, they expect to not see slideshows and anything beautiful. Don’t support ie6, waste of time, and you’re slowing the web down, hurting it.

    • John
      Permalink to comment#

      In fact, all you need for IE6 is a script that detects that someone is using IE6 and have it redirect to a page that severely admonishes said person and provide links to download any other current browser.

      I’m serious, people need to move forward and the only way is to force them by not letting them access the internet.

  13. Josh
    Permalink to comment#

    Thanks so much !

    Really nice and clean tutorial :)

    Good Success

  14. Edmond
    Permalink to comment#

    It is not working, it loads all images at the same time, how do i include the jquery in the header??

    • Chelsie
      Permalink to comment#

      Did you ever figure out how to fix that? I’m having the same problem.

    • Permalink to comment#

      You need to use : #slideshow>div{position:absolute;} to fix this problem.

  15. Edmond
    Permalink to comment#

    Worked it out 9ice, thanks for sharing!!

  16. neil herbert
    Permalink to comment#

    does anyone know how to link the images to a url?

    • Stevevw
      Permalink to comment#

      This is kinda an old question, but since I had the same question and figured out an answer:
      Just wrap the <image src in an <a link like this:

    • Stevevw
      Permalink to comment#

      Oops, having a hard time getting this site to let me quote code. Try this:

      &ltdiv id="slideshow"&gt
        &ltdiv&gt
           &lta href="2013card.html"&gt&ltimg src="links/plant.jpg"&lt/a&gt
         &lt/div&gt
      
      
    • Stevevw
      Permalink to comment#

      Ok, I’m an amateur at these blogs. But I think I finally got it:

      
      &ltdiv id="slideshow"&gt
        &ltdiv&gt
           &lta href="2013card.html"&gt&ltimg src="links/plant.jpg"&lt/a&gt
         &lt/div&gt
      
  17. Is there an easy way to add code in the html so as to adjust the timing of individual slides?

    • you can adjust the timing in the jquery

      .appendTo(‘#slideshow’);
      }, 2000);

      2000 is 2 seconds, change it accordingly

  18. Permalink to comment#

    Worked it out nice, thanks for sharing

  19. adam d.
    Permalink to comment#

    worked like a charm.

    would love to have navigation buttons and nav position indicators.

    anyone figure this out yet?

  20. Permalink to comment#

    Thank you! Very nice example!

  21. Laura
    Permalink to comment#

    Thank you!!! I’ve spent hours trying various methods of doing this, some involving a lot more typing. This is so simple I even kind of understand what I just did…

  22. bokan
    Permalink to comment#

    Hi, I want to create a jquery slideshow like yahoo news slideshow but i donot know what to do, please help me. thanks

  23. thanx for the snippet.. I encountered a problem on jQuery conflict, the solution is simply replace “$” sign with “jQuery”, so we should write:

    <script type="text/javascript">
    jQuery("#slideshow > div:gt(0)").hide();
    
    setInterval(function() {
      jQuery('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
    },  3000);
    </script>
    
    • Florence
      Permalink to comment#

      Sincerely I have no any experience on query nor java. I am just a beginner in web design and I’m helping my church to build up a site. I edited these code on the site, it showed but it’s not sliding

      Please could help me out.

      I addes these just before the closing

      #slideshow {
      margin: 0px auto;
      position: relative;
      width: 550px;
      height: 200px;
      padding: 0px;
      box-shadow: 0 0 20px rgba(0,0,0,0.4);
      }

          #slideshow > div { 
              position: absolute; 
              top: px; 
              left: 10px; 
              right: 0px; 
              bottom: 5px; 
          }
      </style>
      

      $(function() {

      $(“#slideshow > div:gt(0)”).hide();

      setInterval(function() {
      $(‘#slideshow > div:first’)
      .fadeOut(1000)
      .next()
      .fadeIn(1000)
      .end()
      .appendTo(‘#slideshow’);
      }, 3000);

      });

      and these on the

  24. Carl
    Permalink to comment#

    Thanks for this, top piece of coding

  25. Wayne Gomez
    Permalink to comment#

    will this work in all browsers?

  26. Permalink to comment#

    looking for the nav arrows as well… please post solution if found. Thanks!

  27. Michael
    Permalink to comment#

    how can I disable this at a width of 835px or lower. I already have another image in the smaller css files to replace the slideshow. I have tried #slideshow { display: none} but doesn’t work. I’m assuming the javascript is saying “I don’t care, i’m going to show it anyway”. Please help! Thanks

  28. Matt

    Thanks for this! Really great. So…how could I make this animation stop on the final slide?

  29. Keem

    I am new at the slide show and was wondering where do you place Jquery?

  30. Mikkel

    Are there a way to replace fade with another function?

    Because firefox 11 or less can’t show fade function.

    Thanks.

  31. Beautifully simple slideshow!
    Is there a way to run 2 or more of these on the same page? My first slideshow works great, but the second doesn’t run after the images load.

    • Solution: I can run 2 slideshows side-by-side by uploading second .js and .css files and changing the code to match the file name. slideshow2.js:

      $(document).ready(function(){
      
      $("#slideshow2 > div:gt(0)").hide();
      
      setInterval(function() {
        $('#slideshow2 > div:first')
          .fadeOut(1000)
          .next()
          .fadeIn(1000)
          .end()
          .appendTo('#slideshow2');
      },  4000);
      
      });
      

      slideshow2.css:

      #slideshow2 {
          margin: 50px auto;
          position: relative;
          width: 420px;
          height: 593px;
          padding: 10px;
          box-shadow: 0 0 20px rgba(0,0,0,0.4);
      }
      
      #slideshow2 > div {
          position: absolute;
          top: 10px;
          left: 10px;
          right: 10px;
          bottom: 10px;
      }
      

      This may not be the best fix… but it works :D

    • You also need to add these under your head script.

  32. What I love about this code is that I can use text just as I use photos. However when I make all of the “slides” text instead of a mixture of photos and text, the text all loads together first, and then as the rest loads, each one appears individually.

    Now I’ve tried in the slideshow’s div CSS to add a background color but that does not make any difference.

    Please help!

  33. Try bracketing your .js code with:

    $(document).ready(function(){
    
      $(javascript code here);
    
    });

    The same process applies to images that you don’t want to display while they’re loading.

  34. ahiaruhe

    Nice work man, very elegant.

  35. Ray Collins

    How can I get rid of the box behind the slideshow, its sorta messing up everything else.

  36. Paul

    Thanks a lot! You saved my time.

  37. Sahure

    @Joshua Exactly. The code is quite similar to that on Snook’s site.
    But Chris’ code uses s around the images. That is the difference. Plus, it fades out elegantly. Tried out both Snook’s and Chris’ code. Snook’s code had a choppy effect between fade outs.

    @Ray Try deleting/disabling the line:

    box-shadow: ……

    in your CSS i.e. in the #slideshow{….} code portion.

  38. Sahure

    (Never read the fine print on the right side of the comments form.)
    It should have been:
    ….But Chris’ code uses divs around the images…
    on my previous comment.

  39. Natalie

    This is so simple and clean – thank you! I’ve adjusted a few things (change pic size, etc) to fit my slides, but how do you change the background colour of the page without changing the colour of the border around the image? Right now both are white, but if I change the background of the page to grey, for example, the background of the border also turns grey. I’m enjoying the Polaroid effect by making the height larger than the width of the actual images, but I lose this if I change the background colour. Eg. If you upload images that are 600px wide X 448px high, and change the CSS to this, you get get the Polariod snapshot effect:

    #slideshow { 
      margin: 50px auto; 
      position: relative; 
      width: 600px; 
      height: 498px; 
      padding: 10px; 
      box-shadow: 0 0 20px rgba(0,0,0,0.4); 
    }
    
  40. Natalie

    Ok, I figured it out. Easier than I thought. Here’s the addition:

    body {
    	background-color:#E1E1E1;
    }
    
    #slideshow {
    	background-color:#FFF;
        margin: 50px auto;
        position: relative;
        width: 600px;
        height: 498px;
        padding: 10px;
        box-shadow: 0 0 20px rgba(0,0,0,0.5);
    }

    I don’t know jquery so can anyone say how to modify the script so that the slideshow just stops when it reaches the end, instead of looping? I tried removing this

    
    .end()
        .appendTo('#slideshow2');
    },  4000)
    

    but then only 2 pics showed and it stopped (which makes sense when I think about it). I like the idea of it playing automatically when the browser loads, but then perhaps putting a ‘Play Again’ button at the end, instead of looping back.

  41. Thanks for the script – I have been looking for a week at so many php, javascripts but could not find one that worked well with fade. This is nice and easy.

    Can this be made to select photos randomly? I had a good php script that worked, pulled all images from one file, no need to list separately, and played randomly, but only changed on reload. I could not find code to make it continuous or fading, this does latter but not the randomness. Still looking for that if anyone has suggestions. If I find, I’ll share here. I am going to try to use the php file to pull random images if can figure out how to place it into this code.

    • Permalink to comment#

      I modified this to:

      1. Allow showing slides randomly.

      2. Show multiple collapsible sections, where each section has a slideshow going on.

      3. Even has buttons to stop and resume the slideshow!

      3. All sections share the same javascript code.

      This can allow you to create richer, random, collapsible slideshows.

      http://jsfiddle.net/nyrulez/8ZCK8/

  42. Thanks for this snippit! Worked like a charm! I’m excited to use this on the next version of my site. <3

  43. Natalie
    Permalink to comment#

    Hey all-

    A friend figured out how to make the slideshow stop at a certain point – in case you don’t want a continually looping show. Here’s the new jQuery javascript:

    
    $(function() {
           $("#slideshow > div:gt(0)").hide();
           count = 0;
           setInterval(function() {
               count++;
               if (count > 10){
                   clearInterval();
               }else{
                   $('#slideshow > div:first')
                       .fadeOut(1000)
                       .next()
                       .fadeIn(1000)
                       .end()
                       .appendTo('#slideshow');
               }},  3000);
    

    Depending on the number of slides you have, you can modify this line:

    if (count > 10){

    The count is the number of ‘shifts’ or iterations of the script, so a count of 10 will show 11 slides, because the first ‘shift’ is from slide 1 to 2, the second from slide 2 to 3, etc. I have 9 slides, but I want the show to come back to the first slide, and then stop, so I have a count of 10. If you want to show the whole thing twice, then just double the count… Hope this is useful for someone else!

  44. rae
    Permalink to comment#

    All of my photos are showing up at the same time.
    i placed the script right below the script to pull in the external css
    help!

  45. great slider, wont work on ie8 for me, keeps visibly loading the next image below the current one. any ideas?

  46. Nathan

    My problem is that the slideshow won’t slide. I just see one picture…
    what did i do wrong?

  47. Natalie

    Post your code, folks, so we aren’t guessing blindly.

    • Nick
      #slideshow {
        width: 940px;
        height: 412px;
        position: absolute;
        background-color: #000000;
      }
      
      #slideshow > div {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        height: 412px;
        width: 940px;
        z-index: 1;
        background-color: #000000;
      }
      
      
      
      $(function() {
      
        jQuery(“#slideshow > div:gt(0)”).hide();
      
        setInterval(function() {
        jQuery(‘#slideshow > div:first’)
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo(‘#slideshow’);
        }, 3000);
      
      });
      
    • Nick

      Works fine in all other browsers, but ie stacks the images during transition..

  48. henry

    I am learning here… so where do I PLACE the .js code? I have the css properties looking great and all the images in place (in div tag) but they are all stacked up on top of each other and the slideshow does not start.

    Would love to learn how to get this working, thanks to any kind soul who might enlighten me?

    • Natalie
      Permalink to comment#

      @Henry: You place the js code, along with the URL that calls javascript, just before the closing head tag. I viewed the page source on the demo to figure it out. So basically, you add this:

      
      <script>src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"</script>
      
      

      And then right below it, add js as above, all just before the closing head tag:

      
      
      
      
      	<script>
      	  $(function() {
      		$("#slideshow > div:gt(0)").hide();
      	       setInterval(function() { 
      			  $('#slideshow > div:first')
      			    .fadeOut(1000)
      			    .next()
      			    .fadeIn(1000)
      			    .end()
      			    .appendTo('#slideshow');
      			},  3000);
      			
      		});
      	</script>
      
  49. Brilliant, saved my life.

    Used it to install into a WordPress installation for a nice easy slide show, by using a text widget.

    Into Header.php

    	
    	
    		$(function() {
    		
    			$("#slideshow > div:gt(0)").hide();
    	
    			setInterval(function() { 
    			  $('#slideshow > div:first')
    			    .fadeOut(1000)
    			    .next()
    			    .fadeIn(1000)
    			    .end()
    			    .appendTo('#slideshow');
    			},  3000);
    			
    		});
    	
    

    into the StyleSheet:

    #slideshow { 
        margin: 50px auto; 
        position: relative; 
        width: 240px; 
        height: 240px; 
        padding: 10px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.4); 
    }
    
    #slideshow > div { 
        position: absolute; 
        top: 10px; 
        left: 10px; 
        right: 10px; 
        bottom: 10px; 
    }
    
    

    Into the TEXT Widget:

    
       
         
       
       
         
       
       
         Pretty cool eh? This slide is proof the content can be anything.
       
    
    
    
  50. minime
    Permalink to comment#

    has anyone solved the issue whereby the pictures just stack up in ie6?

    • sleepisfortheweak
      Permalink to comment#

      Anon’s comment fixed it for me (for same issue in Chrome)…

      For IE users Change
      .appendTo(‘#slideshow’);
      to
      .appendTo(‘#slideshow > Div:First);

  51. celine
    Permalink to comment#

    Hi! I love that this is simple and easy to do. But i am having some issues. My slideshow transits to another picture but always ends up showing the last picture of my slideshow. Until it finished 1 cycle only it goes on as how it is supposed to. Can anyone help with this? :/

  52. anon
    Permalink to comment#

    For IE users Change
    .appendTo(‘#slideshow’);
    to
    .appendTo(‘#slideshow > Div:First);

  53. Martin
    Permalink to comment#

    Anyone figure out a way to get the frame (shadowbox) to work with internet explorer?

  54. great… do what the title says.. quite simple — just tweaked some CSS elements so that it fits my site.. :)

  55. sam
    Permalink to comment#

    How can I reposition it? It stays in one corner and when I move it it just stays in that one corner.

  56. I’ve added enlargement of the images on mouseover (see below). Looks great, but I want the slideshow to stop on mouseover as well.
    Anyone any idea’s?
    ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
    Example: http://www.kuldipsingh.net/kuldipsingh_nieuws_staatsolie_raffinaderij_nl2.html
    ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
    CSS:

    #slideshow {
    cursor: default;
    list-style: none;
    position: relative;
    width: 296px;
    height: 296px;
    padding: 0px;
    border: 1px solid #134BA4;
    }

    #slideshow > div {
    position: absolute;
    top: 7px;
    left: 7px;
    right: 7px;
    bottom: 7px;
    }

    #slideshow a
    {
    cursor: default;
    }

    #slideshow a .preview
    {
    display: none;
    }

    #slideshow a:hover .preview
    {
    display: block;
    position: absolute;
    top: -102px;
    left: -102px;
    z-index: 1;
    }

    #slideshow img
    {
    background: #fff;
    color: inherit;
    padding: 0px;
    vertical-align: top;
    width: 282px;
    height: 282px;
    border: 0px solid #ddd;
    }

    #slideshow .preview
    {
    border-color: #000;
    width: 500px;
    height: 500px;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
    }
    ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
    HTML (I used 4 images, but posted just one here):
    <div id=”slideshow”>
    <div>
    <a href=”#”><img src=”kuldipsingh_images/foto_animaties/nieuws_groot_staatsolie_raffinaderij_7.jpg” class=”preview” /></a>
    </div>
    </div>

  57. dark knight
    Permalink to comment#

    Very nice!

    But how can I add controls? buttons so that users can go back to whatever picture that they want to view

  58. Pierpaolo
    Permalink to comment#

    great!! Is there a way to make the height of the slideshow adjust to its content?
    I’d like to cycle different headlines, but although my width is fixed, I would like to have the height adapt because the different headlines might be 3, 4 or 5 lines of text.

    Thank you in advance

    • Pierpaolo
      Permalink to comment#

      Any clue?

    • su
      Permalink to comment#

      Don’t know if it’s too late to let you know.
      It’s all about where you put your div. wrap your image & your heading in the same div, that is the slide.

      you have to revised your css style

      slideshow > div{

        position:relative;
      

      }
      or the image won’t move the the heading

    • Pierpaolo
      Permalink to comment#

      @su: it’s not too late, thanks.

      I do not have an heading, just some content (just divs with text, for now) and I wanted the content DIV to become taller or shorter, depending on the number of text lines contained in each frame.

    • Pierpaolo
      Permalink to comment#

      Updat: I’ve tried su’s suggestion and it works.

      The only problem so far is that the container div adapts itself to the height of the content as i wanted,
      but in a sort of “animated” way.

      For example, let’s say that the height of slide 1 is 150px and the height of slide 2 is 100px, the container shows slide 1, then becomes 200px and then shrinks again to 100px when shows slide 2.

      Unfortunately, the application it is in an intranet and I cannot show any example :(

  59. In addition to my question about stopping the slide show on mouse over (see post 08-01-2012) I’ve found someone that added the script:

    var intervalId;

    $(function() {

    $(“#slideshow > div:gt(0)”).hide();

    startInterval();

    $(“#slideshow > div”).mouseover(function() { stopInterval(); });
    $(“#slideshow > div”).mouseout(function() { startInterval(); });

    });

    function stopInterval() {
    clearInterval(intervalId);
    }

    function startInterval() {
    intervalId = setInterval(function() {
    $(‘#slideshow > div:first’)
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo(‘#slideshow’);
    }, 3000);
    }

  60. Once again, Chris Coyer has come to my rescue!! You’re beginning to turn into a bit of a hero for me!!

    Thanks for this awesome script :)

  61. janna
    Permalink to comment#

    i change the width of the slideshow and it stop working? can somebody tell me why?

  62. Permalink to comment#

    I’m having problems getting this slideshow to work on my website, it works when I preview from Dreamweaver in Safari and firefox but when view it from my site, http://www.the-sweetest-day.com only the first image appears and the rest are not able to be found. All the images are saved to the same folder, what am I missing? Any help would be much appreciated. Thanks!

  63. Greg
    Permalink to comment#

    Here is the problem:
    The top image drops down and then fades out. I must be missing something, can’t see the forest for all the damn trees….Outside of this glaring problem it works fine.
    Here is the code:

    Slider

    #slideshow {
    margin: 50px Auto;
    position:relative
    width: 608px;
    height:320px;
    padding:10px;
    }
    #slideshow.div{
    postition:absolute;
    top:10px;
    left:10px;
    right:10px
    bottom:10px;
    }

    $(function() {
    $(“#slideshow>div:gt(0)”).hide();

    setInterval(function(){
    $(‘#slideshow>div:first’)
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo(‘#slideshow’);
    }, 3000);
    });

    Any help would be greatly appreciated.

    • Permalink to comment#

      Hey Greg, I have the same problem. I found it’s when I changed the position of the image from absolute to relative. Though I cannot figure out how to make it stop dropping the image. I need it to be relatively located on the page, not absolutely placed. Any suggestions would be appreciated.

  64. Greg
    Permalink to comment#

    For some reason all the code didn’t copy. So here is the rest.

  65. Jesus Andres
    Permalink to comment#

    Thanks!
    Wonderful, simply awesome!

  66. FABS
    Permalink to comment#

    Pretty cool eh? This slide is proof the content can be anything.

  67. Gregory
    Permalink to comment#

    How do you make the images slide to the left instead of fading?

  68. Permalink to comment#

    Nice slideshow. Thanks.

  69. julia
    Permalink to comment#

    well, facing the same problem with gogle chrome. all images are getting stacked up one place. It’s not showing any type of slide show.

  70. Permalink to comment#

    I’m so confuse where i have to put that css

  71. Vinya
    Permalink to comment#

    It is not working, it loads all images at the same time, how do i include the jquery in the header??

  72. julia
    Permalink to comment#

    its working

    • Vinya
      Permalink to comment#

      Please,Please,Please,Please,Please,Please,Please,
      tell me where i have to put the jquery codes and how to use.

  73. Austin
    Permalink to comment#

    I have an issue, I made a slideshow and implemented my photos that I uploaded to my website’s server. None of the photos are displayed though the slideshow appears. Here is the code.

    //

    // <![CDATA[
    //variable that will increment through the images
    var step=1
    function slideit(){
    //if browser does not support the image object, exit.
    if (!document.images)
    return
    document.images.slide.src=eval("image"+step+".src")
    if (step

    No the code isn’t on the script normally

  74. Paige
    Permalink to comment#

    I put this up on my site and it looks great! However, now i need to add an additional slideshow to the same page. How can I achieve this? I tried just making a slideshow2 div and that actually worked ok, however the images were loading underneath the current image and the popping up into place. How can i fix this?

  75. Permalink to comment#

    Magnificent goods from you, man. I’ve be aware your stuff prior to and you’re simply
    extremely wonderful. I really like what you have acquired
    right here, really like what you’re saying and the best way during which you are saying it. You are making it enjoyable and you continue to care for to stay it sensible. I can’t wait to learn much more
    from you. That is actually a great site.

  76. Permalink to comment#

    I’m no longer certain where you’re getting your information,
    but great topic. I needs to spend a while finding out more or understanding more.
    Thanks for fantastic information I used to be searching
    for this information for my mission.

  77. my
    Permalink to comment#

    how can i put the codes of images i want to see in the slideshow if i use the css codes? what will i do?
    i already try your example code (seen above) ‘but no pictures Appear.
    then I also added this codes(below)

    <

    div class = “slideshow”>

    but no one appear.

  78. I was recommended this web site by my cousin. I am
    not sure whether this post is written by him as nobody else know such detailed about my difficulty.

    You are incredible! Thanks!

  79. glen
    Permalink to comment#

    Great code, thanks so much for this!

    I wanted to give a tip incase anyone was running into the same problem I was: I was loading my images from an rss feed, and putting this code inside a document-ready block didn’t work… I was still getting the stuttering the first time through the slideshow. So I found that where I needed to put this code was after my last time through a loop that was loading the images. Basically, after your for loop that creates all the div and img tags, add the following lines.

    
    $(img).load(function() {
    $("#slideshow > div:gt(0)").hide();
    setInterval(function() { 
      $('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
    },  3000);
    });

    This assumes that img has already been defined inside the for loop. I used the following

             var img = document.createElement("img");
    
  80. Barbara
    Permalink to comment#

    I implemented the slide show and got it to work on my site. Thanks! I have it placed at the top of a web page where you need to page down to see all of the content. If I page down to see the lower content, every time the slide changes, it brings me back to the top of the page. This is irritating if I am looking at something I want to see at the bottom of the web page. Is there any fix to this? Thanks for any help you can suggest.

  81. gremeir mitz ociones
    Permalink to comment#

    what do you mean by

    “$(“#slideshow > div:gt(0)”).hide();” ?

  82. su
    Permalink to comment#

    If you are looking for sliders. you should also check out nivo-slider. thumbnails, controls, all the gizmos… But it’s not as clean & simple as this one obviously.
    Their site has free jQuery & simple tutorial of how to implement it.

    http://nivo.dev7studios.com/

    This is someone else’ input on how to customize it:

    http://www.soslignes-ecrivain-public.fr/Nivo-Slider-4-tweaks-you-should-try.html

    Have fun!

  83. Nicolas
    Permalink to comment#

    Very nice slideshow. Thank you for your work. I wonder how could I pause and resume the slideshow whith the hover on the slideshow.
    Thanks.

  84. byron
    Permalink to comment#

    not working with chrome (same to the demo)

  85. Permalink to comment#

    Wonderful, what a blog it is! This webpage presents useful facts to us, keep it up.

  86. Hoopoe
    Permalink to comment#

    Could you help me to modify js to change body background color everytime a new image appears?

  87. su
    Permalink to comment#

    re:Hoopoe
    don’t over think this. just make the slideshow divs the size of entire website. put style=”background-color: whatevercolor” right at the div. Then put the image as a div inside, put a class or id to them so you can position all of them at the same place.
    Let me know if that’s not clear… frankly i haven’t yet figure out how to type codes on this site…

    • Hoopoe
      Permalink to comment#

      @su

      Thx for your reply.
      I have tried this sollution but it didn’t work in my case.
      My #slideshow div is based at the top of my page. It’s quite small and every image of it has different color.
      Under slideshow there is an accordion menu. Height of whole page changes dinamically.
      I’d like to get an effect similar to this: http://www.qualcomm.com/ (you have to open this in very small window to see mobile version of this website).

    • su
      Permalink to comment#

      Re: Hoopoe
      what the qualcomm website has is a lot more complicated then the script in this article, because of the navigation. It’s very similar to the nivo-slider that i have posted a couple of comments ago. There are a lot of info floating on the web about how to revise it. If you don’t need navigation. It probably still better to use this code. (much cleaner and faster)
      Add javascript/jQuery to your head section. Use getElement ID to set your var $target. (script)
      if ( $target.is(“slide1″) ) {
      (“#webpagedivID”).css(“background-color”, “red”);
      }

  88. Ed Wong
    Permalink to comment#

    If anyone is looking for navigation arrows, here’s an example. The arrows are images positioned where ever you like, selectors are #nav-left and #nav-right.

    Javascript:

            $("#slideshow > div:gt(0)").hide();
    
            // fade out current slide (first), fade in next slide and move first slide to end
            var nextSlide = function() { 
                $("#slideshow > div:first")
                .fadeOut(1000)
                .next()
                .fadeIn(1000)
                .end()
                .appendTo("#slideshow");
            }
    
            var nextSlideTimer = setInterval(nextSlide,  9000);
    
            // fade out current slide (first) and move last slide to top and fade in
            $("#nav-left").click(function() {
                clearInterval(nextSlideTimer);
    
                $("#slideshow > div:first")
                .fadeOut(1000);
                $("#slideshow > div:last")
                .fadeIn(1000)
                .prependTo("#slideshow");
    
                nextSlideTimer = setInterval(nextSlide, 9000)
                setTimeout(nextSlideTimer, 9000)
            });
    
            $("#nav-right").click(function() {
                clearInterval(nextSlideTimer);
    
                $("#slideshow > div:first")
                .fadeOut(1000)
                .next()
                .fadeIn(1000)
                .end()
                .appendTo("#slideshow");
    
                nextSlideTimer = setInterval(nextSlide, 9000)
                setTimeout(nextSlideTimer, 9000)
            });
    
            $("#slideshow").hover(function() {
                $("#nav-left").fadeToggle("slow", "linear");
                $("#nav-right").fadeToggle("slow", "linear");
            });
    
    • Richard
      Permalink to comment#

      Ed Wong,

      Thanks for the nav button code. Do you have an example of this working that you can post? My slideshow is working, but when I try adding your code and 2 button divs, nothing works.

      Thanks,

      Richard

  89. Permalink to comment#

    how will a run my this page TN3 slideshow as autoplay .this is the JS code
    after DOM ready
    $(document).ready(function() {
    //Thumbnailer.config.shaderOpacity = 1;
    var tn1 = $(‘.mygallery’).tn3({
    skinDir:”skins”,
    imageClick:”fullscreen”,
    image:{
    maxZoom:1.5,
    crop:true,
    clickEvent:”dblclick”,
    transitions:[{
    type:”blinds”
    },{
    type:”grid”
    },{
    type:”grid”,
    duration:460,
    easing:”easeInQuad”,
    gridX:1,
    gridY:8,
    // flat, diagonal, circle, random
    sort:”random”,
    sortReverse:false,
    diagonalStart:”bl”,
    // fade, scale
    method:”scale”,
    partDuration:360,
    partEasing:”easeOutSine”,
    partDirection:”left”
    }]
    }
    });
    });

  90. Jesse Taft
    Permalink to comment#

    Hey, great code. Thanks so much.

    Can anyone think of a way to have the slider show one image longer than the others? Or have a separate timer for each slide?

  91. Louis
    Permalink to comment#

    So I have never used jQuery before and I’m pretty new to web development and design. I can’t get the slideshow to work. All of the images just stack up on top of each other. This is what I have:

    page.html
    <head>
    <script>src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
    </script>
    <script>
        $(function() {
           $("#slideshow > div:gt(0)").hide();
           setInterval(function() {
              $('#slideshow > div:first')
              .fadeOut(1000)
              .next()
              .fadeIn(1000)
              .end()
              .appendTo('#slideshow > Div:First');
          },  3000);
        });
    </script>
    </head>
    

    In my body it looks the exact same as the example, and stylesheet.css looks the same as the CSS in the example. I am a little unsure of how/where to add the javascript part. I was really appreciate any advice about what I am doing wrong. Thanks in advance.

    • Louis
      Permalink to comment#

      I figured it out. It was a simple mistake of not including the src within the script tag. I was following an example listed above, which had this mistake. However, I still am running into the issue of the images not lining up correctly within the border. Any ideas why?

    • Bryguy
      Permalink to comment#

      2 years later – thanks for writing that. Had the same problem :)

  92. Haakon
    Permalink to comment#

    I ran in to this little weirdo.

    I am running the script withing an php include, so it might be my CSS that is causing havoc. It works perfectly, but when it slides, it shifts the last frame down and out of my entire content.

    I know this is probably off-base in regards to this script, but can anyone tell me whats going on?

    This is my CSS for the wonderful contraption:

    #side-box{
    width: 400px;
    height: 400px;
    float: right;
    background-color: white;

    and a little screenshot of the bugger in action:

  93. Haakon
    Permalink to comment#
  94. Permalink to comment#

    Hi Chris

    I wanted a camera flash light effect for the slideshow so I tweaked your code a bit.

    http://jsfiddle.net/UwbnB/15/

    I am new to jquery, so can you tell me if I did it correctly? Or any better method.

  95. santosh vishwakrma
    Permalink to comment#

    how stop image on mouse over

  96. Steve
    Permalink to comment#

    Is there a way to make images, of different heights, change the size of a containing div as they display active? All the slideshows I’ve seen use absolute positioning, which makes it impossible for the div surrounding the slideshow to expand to the increase in slide height.

  97. Trish
    Permalink to comment#

    I couldn’t make it work
    Not so easy.

  98. Permalink to comment#

    This was very usefull.. Im making a “infoscreen” for client, and needed a slidshow that could fade between X number of articles, from a category in Joomla.

    Thanks for this simple, and usefull script..

  99. john
    Permalink to comment#

    Fantastic! I only changed my image sizes and this worked out so well. Just stuck for a moment and thought to check here.

    Thank you!

  100. rakesh
    Permalink to comment#

    i followed ur tutorial but i cant see the transition effects, the images are idol. hw to recover?

  101. Raghavendra
    Permalink to comment#

    I want to know is it possible to have slideshow images attachment fixed without scrolling with text in two column webpages. I know how make attachment fixed for a single image.

  102. Larry
    Permalink to comment#

    Thank you profusely for a simple script that does away with the bloated js code I’ve been using for a slideshow. It works well except for a little glitch that I can’t get rid of:

    My 5 photos ignore the fades, only on the first cycle. Then, starting on the second cycle and thereafter, each photo fades in perfectly. Note that I extended the fade in to 2000. What can I do to fix this?

    $(“#slideshow > div:gt(0)”).hide();
    setInterval(function() {
    jQuery(‘#slideshow > div:first’)
    .fadeOut(1000)
    .next()
    .fadeIn(2000)
    .end()
    .appendTo(‘#slideshow’);
    }, 5000);

    • Mads Emil
      Permalink to comment#

      Hey the slideshow is great. I only have 1 problem. After the first “round” of the slideshow. the last images fades 100% out so you can see the background. And then it begins agian, and then it doesn’t fade out completly anymore. I just copied the code. So i hope you understand my question. And btw, is there any copyrights or is this free to use?

  103. Kyle
    Permalink to comment#

    Hello:

    I am using this to cycle a wide header image at the top center of my page.

    When I reduce the browser width, the image sticks to the left side of the browser and the right side of the image is cropped. Is there a way to keep it centered so it crops equally on both sides?

    Normally this would be achieved with:

    margin: 0 auto;

    In CSS but it doesn’t seem to have an effect on this element. Probably because of the positioning required to make the slideshow work? Does anyone know of a workaround?

    My CSS is:

    slideshow {

    margin: 0px auto; 
    position: relative; 
    width: 1440px; 
    height: 346px; 
    padding: 0px;
    overflow: hidden;
    

    }

    slideshow > div {

    position: absolute; 
    width: 1440px;
    margin: 0px auto; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    

    }

    Thanks,
    Kyle

    • Kyle
      Permalink to comment#

      Oops that’s width:100%; on slideshow so that the overflow is hidden.

    • Kyle
      Permalink to comment#

      Okay I spent hours fooling with the CSS on this and finally just Googled the right thing and wouldn’t you know it, I seem to have found a solution.

      In case anyone else is looking to center this slideshow on the page, I added the following CSS to the slideshow > div:

      left: 50%;
      margin-left: -720px; 
      

      With 720 px being half the width of my slideshow.

      Kyle

  104. Esther
    Permalink to comment#

    can add in the clickable photo thumbnails for this script?

  105. Permalink to comment#

    I’ve followed everything step by step, and have read all the comments, and I’m still having issues.

    My code is IDENTICAL to the code at the top of this page. What I don’t understand is why the first cycle of the slideshow stacks my images AND pops up a scroll bar simultaneously??? It makes the whole page shift to the left a few pixels. Very annoying.

    I’m using Safari version 6, I’ve tried it on Firefox, same thing…

    I’ve tried to modify the CSS, to no avail.

    So this is what I have…

    CSS:

    slideshow {

    margin: 50px auto; 
    position: relative; 
    width: 932px; 
    height: 257px; 
    padding: 10px; 
    

    }

    slideshow > div {

    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
    

    }

    HTML:

    $(“#slideshow > div:gt(0)”).hide();

    setInterval(function() {
    $(‘#slideshow > div:first’)
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo(‘#slideshow’);
    }, 5000);

    Here’s my website…. http://curiouslittlebird.bigcartel.com

    Any feedback on how I can fix this would be great.

  106. Permalink to comment#

    Nice script, but do you know how to stop the loop?

    I was trying Natalie code but didnt’ work for me.

  107. yshao
    Permalink to comment#

    How did you make the small scroll down windows for html css jquery contents? I am trying to do that for my site. T.T

  108. mega
    Permalink to comment#
  109. Kayleigh
    Permalink to comment#

    Wonderful post however , I was wanting to know if you could write a litte more on this subject?
    I’d be very grateful if you could elaborate a little bit further. Cheers!

  110. rae
    Permalink to comment#

    ok I have one working slideshow on the index page, i tried to use the same code on another page and changed the slideshow name and its not working right..anyone know why?
    this is the page if you want to see the error http://www.deerlakepub.com/pub.html

    $(function() {
    $(“#slideshow2 > div:gt(0)”).hide();
    setInterval(function() {
    $(‘#slideshow2 > div:first’)
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo(‘#slideshow2′);
    }, 4000);
    });

    }

    slideshow2 {

    margin: 25px auto; 
    position: absolute; 
    right: 20px;
    width: 400px; 
    height: 280px; 
    

    }
    }

    slideshow2 > div {

    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
    

    }

  111. Eva
    Permalink to comment#

    Hey. First of all thanks for sharing it is a great slider.
    I am having the problem, that the image does change, but it the first image shown is kind of pushed down and then in the box above the new image is shown. Cannot find the problem.

    Would be nice to get an advice. THanks:)

    $(document).ready(function(){
    $(“#slideshow_auto > div:gt(0)”).hide();setInterval(function() {
    $(‘#slideshow_auto > div:first’)
    .fadeOut(1500)
    .next()
    .fadeIn(1500)
    .end()
    .appendTo(‘#slideshow_auto’);
    }, 2000);
    });

    html:

  112. Eva
    Permalink to comment#

    Sorry I just realised, that the html didnt post:

  113. Permalink to comment#

    The write-up provides confirmed necessary to myself. It’s very helpful and you really are
    naturally extremely well-informed in this area. You have got opened up my eye to be able
    to numerous views on this kind of subject matter together with
    intriquing, notable and solid articles.

  114. Basti
    Permalink to comment#

    This Slideshow is really great, love it! Unfortunately it doesn’t work in Internet Explorer 8… I really hate this browser. -_- Are there any solutions to fix the animation in IE 8?
    Thanks in advance.

  115. Phil
    Permalink to comment#

    Great code! One problem– how do I deal with portrait-oriented photos versus landscape-oriented photos? I can’t have one dimension for both..

  116. Your own write-up has proven necessary to me.

    It’s extremely educational and you’re simply obviously really educated in this field. You get opened up my eyes to numerous thoughts about this particular matter along with interesting and sound content.

  117. Thank you finally a simple slide show. This is just enough to create a custom slideshow. It is like you actually believe we can code.

  118. Maxi
    Permalink to comment#

    Love it ! Preety simple and effective. I’ll use it.

  119. Bob
    Permalink to comment#

    This is a great – simple, easy to use. Thanks so much!

  120. Danielle
    Permalink to comment#

    I have multiple pages on my site that I would like this slider to appear. Each slider has a different wrapper (the wrapper is an image of a mac computer) with different images in each slider.

    I’ve created the slider on my home page with the id of “slider-home”. Do I need to Javascript for each slider in the header file with different id’s depending on what page it’s on?

    Hope someone can shed some light on this.

    Thanks :)

  121. Billy
    Permalink to comment#

    Quick question, how do you add image title to the slider for each image?
    Thanks in advance

    • Billy
      Permalink to comment#

      Just realised I had to remove the absolute positioning of the images, now i have captions

  122. Renat
    Permalink to comment#

    One of the simplest and the best solutions for image slider! I used it on my website. Thank you very much!

  123. Ryan
    Permalink to comment#

    Any idea why I can’t use this on eBay?

    It gives me this warning message:
    “Your listing cannot contain javascript (“.cookie”, “cookie(“, “replace(“, IFRAME, META, or includes), cookies or base href.”

    I don’t see any of those in the script I pulled from here, but when I take your script out it lets me through. So…

    • Ryan, again
      Permalink to comment#

      I got it. You need to use a special JQuery loader. It was the

      script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js”

      line that eBay didn’t like.

      Replace that line with this: http://lastdropofink.co.uk/assets/files/jquery-eBay.txt

    • Just for the record, that last link is pretty hacky and likely against eBay’s terms of service. they don’t want you linking up third party JavaScript, it just so happens that hack slips through the cracks.

  124. Kaleb Berry
    Permalink to comment#

    Where are you suppose to place the Script at? before the Html, in between or after. I am kinda new to Jquery and JS

  125. Glen Weinberg
    Permalink to comment#

    Kaleb,

    Put the script inside your head tag before the body tag. Include the jquery file too. In the example below, I’m using the most recent from google’s api:

    $(document).ready(function(){
    $(“#slideshow > div:gt(0)”).hide();
    setInterval(function() {
    $(‘#slideshow > div:first’)
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo(‘#slideshow’);
    }, 5000);
    });

    • Permalink to comment#

      Glen,you forgot something > before .next() command , it my issue for a week :)
      you should add .hide() before the code goes next :

       $(document).ready(function(){
      $(“#slideshow > div:gt(0)”).hide();
      setInterval(function() {
      $(‘#slideshow > div:first’)
      .fadeOut(1000)
      .hide()
      .next()
      .fadeIn(1000)
      .end()
      .appendTo(‘#slideshow’);
      }, 5000);
      });
      

      anyway ,thanks to all

  126. Shiela
    Permalink to comment#

    I have been trying to make this work for hours now, please help! i would like to make it work first then use it on the website i am working on.

    This is what I have:

    http://imageshack.us/photo/my-images/542/slide1dn.jpg/

    http://imageshack.us/photo/my-images/96/slide2pp.jpg/

    and this is what comes up:

    http://imageshack.us/photo/my-images/13/slide3ri.jpg/

    Thank you in advance!

  127. David

    Hil all,
    this is the one of the nicest slideshows I found on onternet :)

    I want to ask, how can I make the slideshow random-images ?

  128. Your report offers verified useful to us. It’s very useful and you’re simply obviously quite educated in this region. You have got exposed my eyes for you to numerous thoughts about this subject matter with intriguing, notable and solid written content.

  129. Pete

    I was beating my head on the table until I realized this does not work with jQuery 1.9…

  130. Your own post provides established necessary to me personally.
    It’s really helpful and you really are obviously extremely experienced in this field.
    You get exposed my face for you to varying thoughts about this particular topic with interesting and sound articles.

    Feel free to visit my website: [Valium](http://www.

    kigala.tsn.at/gaestebuch/007.php “Valium”)

  131. There are many factors that can cause erectile dysfunction, but this
    condition usually has its origins in physiological causes such as penile injury or damage, some medical disorders or because of side effect of
    certain medications. Moreover, Viagra has helped treat impotence associated with diabetes, spinal cord injuries,
    prostate surgery, and even some other mysterious causes. Vig – Rx plus pill is one such non-prescription male
    enhancer which is an improved version of Vig – Rx
    pills.

    Here is my page … [buy levitra australia](http:
    //brentsimonwaus.wordpress.com/ “buy levitra australia”)

  132. It’s enormous that you are getting thoughts from this paragraph as well as from our discussion made here.

  133. Does your site have a contact page? I’m having problems locating it but, I’d like to send you an e-mail.
    I’ve got some recommendations for your blog you might be interested in hearing. Either way, great site and I look forward to seeing it grow over time.

    my webpage :: buy phentermine

  134. I’ve noticed it takes a long time before it begins rotating through the slides. It seems relative to how long each slide displays. Anyone else notice this? any way to get them to start right away?

  135. Matt G

    There must be a better way, but this works for navigation.

    <script type="text/javascript" charset="utf-8">
            $(document).ready(function () {
                $("#slideshow div:gt(0)").hide();
    
                var index;
                index = 0;
                var totalslides;
                totalslides = 5;
    
                var nextSlide = function () {
                    $('#slideshow div').eq(index).fadeOut(1000);
                    $('#nav' + index).toggleClass('navselected');
                    index++;
                    if (index > totalslides - 1) { index = 0; }
                    $('#slideshow div').eq(index).fadeIn(1000);
                    $('#nav' + index).toggleClass('navselected');
                }
                var nextSlideTimer = setInterval(nextSlide, 4000);
    
                function nav(selectedSlide) {
                    clearInterval(nextSlideTimer);
    
                    $('#slideshow div').eq(index).fadeOut(1000);
                    $('#nav' + index).toggleClass('navselected');
                    index = selectedSlide;
                    $('#slideshow div').eq(index).fadeIn(1000);
                    $('#nav' + index).toggleClass('navselected');
    
                    nextSlideTimer = setInterval(nextSlide, 4000);
                }
    
                $("#nav0").click(function () { nav(0); });
                $("#nav1").click(function () { nav(1); });
                $("#nav2").click(function () { nav(2); });
                $("#nav3").click(function () { nav(3); });
                $("#nav4").click(function () { nav(4); });
            });
    
    
        </script>
    

    Here is my HTML:

    <div id="slideshow">
            <div><a href="#" style="background-image: url('slider/img0.jpg');"></a></div>
            <div><a href="#" style="background-image: url('slider/img1.jpg');"></a></div>
            <div><a href="#" style="background-image: url('slider/img2.jpg');"></a></div>
            <div><a href="#" style="background-image: url('slider/img3.jpg');"></a></div>
            <div><a href="#" style="background-image: url('slider/img4.jpg');"></a></div>
        </div>
        <div id="slideshownav">
            <a id="nav0" class="navselected">Slide 0</a>
            <a id="nav1">Slide 1</a>
            <a id="nav2">Slide 2</a>
            <a id="nav3">Slide 3</a>
            <a id="nav4">Slide 4</a>
        </div>
    

    And finally my CSS:

    <style>
        #slideshow { position: relative;width: 713px; height: 310px;}
        #slideshow div { position: absolute; top: 0;left: 0;         }  
        #slideshow a {display: block;width:713px;height:310px; }    
        #slideshow a:hover{background-position: center bottom;}
    
        #slideshownav a.navselected{color:#EB910C;}
        #slideshownav {text-align:left;padding-top:8px;padding-bottom:20px;}
        #slideshownav a {padding-right:10px;color:#748090;font-size:10px;}
        #slideshownav a:hover {cursor:pointer;}    
    
      </style>
    
  136. Ken

    Hey guys. How do I add an additional image while maintaining the fade’s in the loop? Thanks!

  137. When some one searches for his necessary thing, so he/she wants to
    be available that in detail, therefore that thing is maintained over here.

    Also visit my web site; [learn how you can get xanax](http://www.
    getxanax.com “learn how you can get xanax”)

  138. Worked beautifully, thank you very much!

  139. Eric
    Permalink to comment#

    Has anyone found out how to make this responsive? I’m referring to just the simple slideshow explained at the top, no fancy navigation buttons or anything. I cannot make it responsive on my own and I think it’s related to having divs within divs…

  140. Eric
    Permalink to comment#

    Thank you Jared!! It IS exactly what I am looking for lol

    • Great, hope you find it usefull. If you need any help or find errors just leave an issue comment on my github page and I will try to help you out as best as I can.

  141. dennis
    Permalink to comment#

    sir i am new in jquery and i dont know how to put the codes.can you do it very clearly like where to put the codes sir .pleaseeeeee i hope you appreaciate it sir

  142. Permalink to comment#

    Jared Christensen I saw your responsive fix and it has worked like a dream on my slide show, but now my slideshow is smaller than it was. I am stumped right now as far as how to go about making it the size I want while still being responsive.

    • Jared Christensen
      Permalink to comment#

      Try giving the slideshow ul a min width.

      <ul class="slideshow" style="min-width: 500px">

  143. Permalink to comment#

    I modified this to:

    Allow showing slides randomly.
    Show multiple collapsible sections, where each section has a slideshow going on.
    Even has buttons to stop and resume the slideshow!
    All sections share the same javascript code.

    This can allow you to create richer, random, collapsible slideshows.

    http://jsfiddle.net/nyrulez/8ZCK8/

  144. AJu
    Permalink to comment#

    i wonder that add multi media like youtube/vimeo to the slider when the slide is pause if the autoplay youtube play. when it is done then next slide show and loop.

    http://stackoverflow.com/questions/19385406/how-to-advance-to-next-slide-after-video-in-bootstrap-carousel

  145. Permalink to comment#

    Argh, I need this code without the absolute positioning in the css as all my stuff is floated left, any ideas anyone?

  146. Courtney
    Permalink to comment#

    Hi! Is there a way to add links to the images? When I try, it makes the slideshow not work. The first image will have the link but then the following images don’t appear at all.

  147. Lori
    Permalink to comment#

    You are the bomb!!! I have been struggling since yesterday to incorporate a simple yet quality slideshow onto a homepage – this is PERFECT!!! Thanks so much!!! :o)

  148. Permalink to comment#

    Whoever I wrote this … I could kiss you!!!
    Simple, elegant, adaptable. Worked on the first try.

  149. Powderflask
    Permalink to comment#

    Simple, elegant, functional, works perfectly.
    Nice work – thanks for posting.

    To other commenters who want the kitchen sink thrown in – look elsewhere, there are lots of fully functional sliders around, but they can be cumbersome. This one is a simple tool for a simple task – just what I needed. thanks again.

  150. space
    Permalink to comment#

    To other commenters who want the kitchen sink thrown in – look elsewhere, there are lots of fully functional sliders around, but they can be cumbersome. This one is a simple tool for a simple task – just what I needed. thanks again.

  151. Diwakar
    Permalink to comment#

    Hi! Is there a way to add links to the images? When I try, it makes the slideshow not work. The first image will have the link but then the following images don’t appear at all.

  152. Permalink to comment#

    I got it working in both Chrome and Firefox, but not in IE 11. What is the problem

  153. Permalink to comment#

    What’s up Dear, are you really visiting this website on a regular basis,
    if so then you will without doubt take good knowledge.

  154. Permalink to comment#

    I noticed, as others as have as well, that there is an initial pause at the beginning, before any of the slides appear, and when they do appear, it actually was showing my second slide first. It looks like the script assumes that there is an initial image that is visible, which isn’t the case in the code presented in the article. To fix this, just add the following to the stylesheet:

    #slideshow > div:first-child{
         display: block;
    }
    
  155. In google chrome it seems like it re-access the image everytime a slide is shown… this seems like it can’t be possible because it is just changing the properties of the div.

    It works fine in ie explorer but chrome seems to be messing it up.

    if someone has google chrome take a look at this site and see what is happening.

    http://www.2015cec.ca/en

  156. Ken DeWitt
    Permalink to comment#

    to get it to work in ie 7 to 11 for the source code of the demo and copy the code then take out what you do not need and you are set. I have tested the source code with jquery 2.1.0 and it will not work in ie 7 and 8. Here is the code (note: I removed the drop shadow.) If any one knows how to get it to work in ie 7 and 8 using jquery 2.1.0 that would be great.
    `

    <title>Simple jQuery Slideshow</title>
    
    <link rel='stylesheet' href='css/style.css'>
    
    <style>
        #slideshow { 
            margin: 80px auto; 
            position: relative; 
            width: 240px; 
            height: 240px; 
            padding: 10px; 
            /*box-shadow: 0 0 20px rgba(0,0,0,0.4);*/ 
        }
    
        #slideshow > div { 
            position: absolute; 
            top: 10px; 
            left: 10px; 
            right: 10px; 
            bottom: 10px; 
        }
    </style>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script>
        $(function() {
    
            $("#slideshow > div:gt(0)").hide();
    
            setInterval(function() { 
              $('#slideshow > div:first')
                .fadeOut(1000)
                .next()
                .fadeIn(1000)
                .end()
                .appendTo('#slideshow');
            },  3000);
    
        });
    </script>
    

    Pretty cool eh? This slide is proof the content can be anything.

    `

    • Ken DeWitt
      Permalink to comment#

      View the source code of the demo page and remove the part you do not need.

  157. mtminded
    Permalink to comment#

    this one is nice – and just everything i need…

    got a problem though – i’m using it for different slideshows on the same page.
    the first one works perfectly. the second one misses the fadeout animation. therefore it looks kinda ‘jumpy’

    • mtminded
      Permalink to comment#

      found the reason.
      the transition doesn’t work, if the slide is a structured element…

      http://jsfiddle.net/ehLdW/4/

      dunno what i could do – but i need something, to cycle through all child elements do get the transition right…

  158. How can I reposition it?
    but Nice work – thanks for posting.

  159. Andrew K
    Permalink to comment#

    I thought I’d pass this along if anyone is wanting to stop your slideshow after a certain number of frames or loops, just set the number – in my case 5 – if(timesRun === 5){ to the number of slides you want to show before stopping, just remember JavaScript starts at 0 so in the case of using 5 it will show 6 frames before stopping.

        var timesRun = 0;
        var interval = setInterval(function(){
            timesRun += 1;
            if(timesRun === 5){
            clearInterval(interval);
        }
        $('#slideshow > div:first')
            .fadeOut(600)
            .next()
            .fadeIn(600)
            .end()
            .appendTo('#slideshow');
            }, 900);
    
  160. nikesh
    Permalink to comment#

    how can i create 2 sildes at same page??

  161. Clain Dsilva
    Permalink to comment#

    Lovely code snippet. It can’t be any slimmer … I am obsessed with bulkier JQuery plugins. This one works like a charm. Thumps up Mate..!!

  162. Christian

    Hello,
    I am an IT apprentice, and I am trying really to learn how to do slideshow, as I also do photography. However this is hasn’t worked for me, my images don’t change, its stuck on the first image, does anyone know whats wrong?
    This is my code:

    Home

    #slideshow {
    margin: 50px auto;
    position: relative;
    width: 240px;
    height: 240px;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
    }

    #slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    }

    $(“#slideshow > div:gt(0)”).hide();

    setInterval(function() {
    $(‘#slideshow > div:first’)
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo(‘#slideshow’);
    }, 3000);

    Welcome to our site

    function goBack() {
    window.history.back()
    }

    Go Back

    function goForward() {
    window.history.forward()
    }

    Forward
    Qmulus
    Forms
    Monorialo
    Videos
    Test Pages

    Site progress

  163. mark
    Permalink to comment#

    Hi and thanks for this simple code, is there any chance to automatically redirect to a page just after the last image that I would like to set? so that I hve 3 image in the slideshow 3 sec each and only then jump to a different page…? Thank you to anyone willing to answer

    • mtminded
      Permalink to comment#

      hey mark,

      you have to imagine this slideshow like a deck of cards. you turn around the first card, take a look at it, then turn it back and put it at the bottom. again you take the first card, take a look at it and move it to the end.

      as long as you’re doing this, and assuming, that your brain works like js (what means, you only remember things that you’ve been told to remember), you can never tell, which one is actually the last slide.

      if you only need to run through your slides once, then you don’t need to shift the single slides around, and use a handle… like that:

      $("#slideshow > div:gt(0)").hide(); 
      $('#slideshow > div:first').addClass("activeSlide"); 
      
      setInterval(function () {
              if($('#slideshow > div:last').hasClass("activeSlide"))
              {
                  //put your redirect code here
              }
              $('#slideshow > .activeSlide').fadeOut(1000)
                  .removeClass("activeSlide") 
                  .next() 
                  .addClass("activeSlide") 
                  .fadeIn(1000)
                  .end();
      }, 3000); //done
      

      the part with the redirect code for the last slide is in the beginning of the interval function, to ensure, that the last slide is shown for three seconds before moving on to the next page… if you would put it at the end, you would fade in the last slide, then realise, that it is the last slide and instantly redirect.

  164. Permalink to comment#

    So, awesome slider…of course. Finally something that’s as simple as we need.

    Any thoughts from anyone on how to start from the last div or slide and proceed back to the first? So just, a backwards slide show?

    I would love you long time.

    My webpage: http://www.colejohnsontrialsite.com/view.php

    • mtminded
      Permalink to comment#

      Hey Cole,

      the slideshow posted here, always takes the first element, fades it out and moves it to the end. therefore you have a looping slideshow, and a simple handle on the actual slide, since this is always the first one…

      your request to have it first moving from a to z and then from z to a will completely change this snippet, since you can’t move the slides around, you need them in there original order …
      i’ve created a jsfiddle 4 you over here: jsfiddle

      i guess, there are better ways to do it… but that was the fastest, i came up with…

  165. Permalink to comment#

    This jQuery code work with no prob for me

    $(function(){
        $('#slidsideshow div:gt(0)').hide();
        setInterval(function(){
          $('#slidsideshow :first-child').fadeOut()
             .next('div').fadeIn()
             .end().appendTo('#slidsideshow');}, 
          3000);
    });
    
  166. George
    Permalink to comment#

    Thank you Chris , working nice.

  167. Vinod
    Permalink to comment#

    Dude. This is awesome. Love it. Thank you

  168. Kushan
    Permalink to comment#

    To make it work add thiss code in your head section..

        $(function() {
    
            $("#slideshow &gt; div:gt(0)").hide();
    
            setInterval(function() { 
              $('#slideshow &gt; div:first')
                .fadeOut(1000)
                .next()
                .fadeIn(1000)
                .end()
                .appendTo('#slideshow');
            },  3000);
    
        });
    

    thats it now it works like a charm

    • Kushan
      Permalink to comment#

      Dont forget to add this at the starting of the script
      and add the tag sign because this site if #$#%&*$ not alowing me to post the code

      script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js”script
      script

  169. vaibhav
    Permalink to comment#

    Good work awesome work with fade in fade out its help me ,
    but Jquery have some problem .. :) but if you write your code like this jquery proper work
    $(document).ready(function(){

    $(“#slideshow > div:gt(0)”).hide();
    setInterval(function() {
    $(‘#slideshow > div:first’)
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo(‘#slideshow’);
    }, 3000);
    });

  170. Cass
    Permalink to comment#

    I’m having issues with this!
    I’ve tried various variations from replies posted, as well as OP codes (pasted EXACTLY as they were posted) and the images do not appear to slide, only one image appears but doesn’t change…

    No matter which variation I try, the results are the same, so I’m assuming that I’m not pasting something in the appropriate place of my coding?

    The jQuery bit of coding goes WHERE exactly?
    I’ve tried putting it within AND outside of my <style> tags and neither worked
    I’ve tried putting it in the <head> styles but same results (or lack there of)
    Everything else shows up accordingly EXCEPT that the images do not slide!

    My website is hosted on a subdomain so both javascript and jQuery should be functional?
    I have roughly 8 years XP with CSS / HTML but this is my first project incorporating javascript / JQuery into the mix…
    Somebody please help, I’ve been trying to figure this out for days!

  171. Mike Siemers
    Permalink to comment#

    I’m having the exact same problem as Cass. I put the Java code into tags in the section.

    The dog and the text appear together in the same image but it does nothing. I have Java enabled in my browser. It does not work in either Chrome or Firefox.

    Obviously, I am missing a key component.

    • Mike Siemers
      Permalink to comment#

      I see where I messed up. You need to put in the , too.

  172. Clarence
    Permalink to comment#

    I spent hours looking for, online and off-line, a simple HTML-CSS-Java code to create a “Photo Viewer/Slider”, which was not overly complex. I was almost about to and I came across your tutorial. Get what? It worked the first time without any problems. Thanks you, Thanks you, and Thank you!

    Clarence

  173. Brandy
    Permalink to comment#

    Anyone know if there is a way to make each of the slides clickable so they can go to an outside link (but different links)?

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".