Need some help?

I'm usually available for small jobs or problem solving with jQuery or css, at reasonable rates. Just get in touch.

Web Hosting

We recommend Clook for web hosting. UK based, great service and great value.

Simple jQuery image slider

Bored this morning so I thought I would adapt my jQuery image crossfade cycler into an image slider. Tested in IE6/7/8, Firefox 3, Chrome, Opera 9/10, Safari 4, all on Windows XP, and Safari 5 on Mac OS X/Snow Leopard. You might also want to have a look at my image and caption slider demo.

The demo

Hoverfly on a green leaf Fly on a pink flower Insect on a leaf Fly

The code

Here’s the necessary css – just to show the important bits – you’ll need to add some more to position and style as required. Depending on your layout you may also need to set the height and width on #porfolio_cycler to match your images.

#portfolio_slider{position:relative;overflow:hidden}
#portfolio_slider img{position:absolute;left:100%}
#portfolio_slider img.active{left:0}

And here’s the javascript:

function slideImages(){
      var $active = $('#portfolio_slider .active');
      var $next = ($('#portfolio_slider .active').next().length > 0) ? $('#portfolio_slider .active').next() : $('#portfolio_slider img:first');
      $next.css('z-index',2);//set the z-index so the image will slide across the top of  current one
      $active.css('z-index',1);//and set the current active image so it's below> 
      $next.animate({left:0},"slow",function(){//slide in the next image
              $active.removeClass('active').css('left',"100%");//when the slide's finished, reset the previous active image
              $next.addClass('active');//and set the new image to active
        });
    }

    $(document).ready(function(){
      // run every 7s
      setInterval('slideImages()', 7000);
    })

The logic

The slider div is set with overflow:hidden. All the images are loaded with the page and positioned absolutely within the slider div, with left:506px which is the width of my slider, so the images aren’t visible. One image is initially set with a class of “active” which sets left:0 , so that it is visible.

Then, using jQuery, I’m identifying the active image, and then the next image down. I’m doing this via the jQuery .next() method. If there isn’t a next image – if we’re at the end of the images – I’m selecting the first image instead using .first().

Now, once I’ve identified the next image, I’m assigning z-index=2 to this image, and z-index=1 to the active image, so that the next image will slide across the top of the active image.

Then, I’m animating the next image using its left property. When this completes I’m removing the class of the previously active image and moving it back outside the slider so it’s ready to slide in again, and I’m setting the new image to active.

Finally, all of this code is sitting in a function which I’m calling every seven seconds via setInterval().

Can I use this on my site?

Probably. See my policies on using code from this site.

10 responses to “Simple jQuery image slider”

  1. Simon says:

    Looks like you just need to add position:absolute to #bannerslide2…

  2. Gord says:

    Thanks Simon, good idea adding the 100%,
    anyway got it working
    but not the image centering,
    here is the example at codepen
    I’ll play around with it a bit more if you don’t have time… just if you’re interested.

    http://codepen.io/anon/pen/BrqnC

  3. Simon says:

    Hi Gord

    I’d have thought the simplest solution would be to position #portfolio_slider with your width and the negative margin, centred, then other than changing the code to reflect the image width, everything else should stay the same.

    EDIT: In fact the code can be simplified a little so you don’t need to amend it for different image widths – which I’ve done.

  4. Gord says:

    Brilliant idea Simon I’m loving playing around with your stuff.
    So my problem is I’m using a 2010px img then to center it in the 100% width wrapper
    The css img left 50% , width 2010px, and margin-left -1005px
    then the active image css left 2010px
    Then the jQuery css left 2010px
    I tried a few different combos of that but I’m missing something I guess. Next I’ll try it as a div background but do you have an idea?

  5. Simon says:

    Check your console for errors. If there are none, have you set unique ids for the slider and the crossfade? Have you loaded both scripts correctly, after loading jQuery? There are many causes for failure, but they will work together without an issue.

  6. Flash says:

    Thank you this now works on its own but I want to use it on the same webpage as your cross fade image script from your website. The slider works on the same page as the cross fader but the cross fader doesn’t work at all. Any ideas why not?

  7. Simon says:

    Sounds like you might not have the height and width set for #portfolio_slider.

  8. Flash says:

    I can’t get this one to work, as soon as the css portfolio_slider overflow is set to hidden in the css the first image doesn’t show at all and I have a blank screen? I am not sure what I have missed out or done wrong? Any ideas?

  9. Dipeesh says:

    Super…

  10. Lawrence Khan says:

    Fantastic

Useful? Interesting? Leave me a comment

I've yet to find a way of allowing code snippets to be pasted into Wordpress comments - so if you're trying to do this you'd be better off using the contact form.