{"id":1010,"date":"2010-09-15T10:12:26","date_gmt":"2010-09-15T09:12:26","guid":{"rendered":"http:\/\/www.simonbattersby.com\/blog\/slide-images\/"},"modified":"2013-09-16T15:36:27","modified_gmt":"2013-09-16T14:36:27","slug":"simple-jquery-image-slider","status":"publish","type":"page","link":"https:\/\/www.simonbattersby.com\/blog\/simple-jquery-image-slider\/","title":{"rendered":"Simple jQuery image slider"},"content":{"rendered":"

Bored this morning so I thought I would adapt my jQuery image crossfade cycler<\/a> 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<\/a>.<\/p>\r\n\r\n

The demo<\/h3>\r\n\r\n
\r\n
\r\n\"Hoverfly\r\n\"Fly\r\n\"Insect\r\n\"Fly\"\r\n<\/div>\r\n<\/div>\r\n\r\n

The code<\/h3>\r\n\r\n

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.<\/p>\r\n

\r\n#portfolio_slider{position:relative;overflow:hidden}\r\n#portfolio_slider img{position:absolute;left:100%}\r\n#portfolio_slider img.active{left:0}\r\n<\/pre>\r\n\r\n
And here’s the javascript:<\/p>\r\n\r\n
function slideImages(){\r\n      var $active = $('#portfolio_slider .active');\r\n      var $next = ($('#portfolio_slider .active').next().length > 0) ? $('#portfolio_slider .active').next() : $('#portfolio_slider img:first');\r\n      $next.css('z-index',2);\/\/set the z-index so the image will slide across the top of  current one\r\n<\/span>      $active.css('z-index',1);\/\/and set the current active image so it's below<\/span>> \r\n<\/span>      $next.animate({left:0},\"slow\",function(){\/\/slide in the next image\r\n<\/span>              $active.removeClass('active').css('left',\"100%\");\/\/when the slide's finished, reset the previous active image\r\n<\/span>              $next.addClass('active');\/\/and set the new image to active\r\n<\/span>        });\r\n    }\r\n\r\n    $(document).ready(function(){\r\n      \/\/ run every 7s\r\n<\/span>      setInterval('slideImages()', 7000);\r\n    })<\/pre>\r\n\r\n\r\n\r\n
The logic<\/h3>\r\n
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<\/code> 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<\/code> , so that it is visible.<\/p> \r\n\r\n
Then, using jQuery, I’m identifying the active image, and then the next image down. I’m doing this via the jQuery .next()<\/code> 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()<\/code>.<\/p>\r\n\r\n
Now, once I’ve identified the next image, I’m assigning z-index=2<\/code> to this image, and z-index=1<\/code> to the active image, so that the next image will slide across the top of the active image.<\/p>\r\n\r\n
Then, I’m animating the next image using its left<\/code> 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.<\/p>\r\n\r\n
Finally, all of this code is sitting in a function which I’m calling every seven seconds via setInterval()<\/code>.<\/p>\r\n
Can I use this on my site?<\/h3>\r\n
Probably. See my policies on using code from this site<\/a>.<\/p>\r\n\r\n