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




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.
Looks like you just need to add position:absolute to #bannerslide2…
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
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.
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?
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.
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?
Sounds like you might not have the height and width set for #portfolio_slider.
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?
Super…
Fantastic