{"id":1717,"date":"2010-12-15T13:19:44","date_gmt":"2010-12-15T12:19:44","guid":{"rendered":"http:\/\/www.simonbattersby.com\/blog\/"},"modified":"2014-03-16T10:38:19","modified_gmt":"2014-03-16T10:38:19","slug":"jquery-endless-slider","status":"publish","type":"page","link":"https:\/\/www.simonbattersby.com\/blog\/jquery-endless-slider\/","title":{"rendered":"jQuery endless looped slider"},"content":{"rendered":"

Here’s another variation on a jQuery slider, this time with the images in an endless loop. Tested in IE6\/7\/8, Firefox 3, Chrome, Opera 9\/10, Safari 4, all on Windows XP.<\/p>\r\n\r\n

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

The code<\/h3>\r\n

Here’s my example html:<\/p>\r\n

<div id=\"slider_box\">\r\n   <div id=\"endless_slider_arrows\">\r\n      <img id=\"endless_slider_left\" src=\"\/images\/misc\/left_arrow.gif\" alt=\"Scroll left\" title=\"Scroll left\" width=\"56\" height=\"56\"\/>\r\n      <img id=\"endless_slider_right\" src=\"\/images\/misc\/right_arrow.gif\" alt=\"Scroll right\" title=\"Scroll right\" width=\"56\" height=\"56\"\/>\r\n   <\/div>\r\n   <div id=\"slider_images\">\r\n      <img class=\"active\" src=\"\/path\/to\/image1.jpg\"\/>\r\n      <img src=\"\/path\/to\/image2.jpg\"\/>\r\n    <\/div>\r\n<\/div>\r\n<\/pre>\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:<\/p>\r\n
\r\n#slider_box{border:1px solid #303030;position:relative;height:337px;width:506px;overflow:hidden}\r\n#slider_images{position:absolute;left:0;top:0}\r\n#slider_box img{float:left}\r\n<\/pre>\r\n\r\n
And here’s the javascript:<\/p>\r\n\r\n
$(document).ready(function(){\r\n\r\n   var $imgWidth = $('#slider_images img').first().outerWidth();\/\/read the image width\r\n<\/span>   var $imgCount = $('#slider_images img').length;\/\/count the images\r\n<\/span>   $('#slider_images').width($imgWidth*($imgCount+2));\/\/set the width of the container to the number of images - plus 2 to account for the cloned images\r\n<\/span>   $('#slider_images img').first().addClass('endless_slider_first');\/\/identify the first and last images\r\n<\/span>   $('#slider_images img').last().addClass('endless_slider_last');\r\n   $('.endless_slider_first').clone().appendTo('#slider_images');\/\/clone the first image and put it at the end\r\n<\/span>   $('.endless_slider_last').clone().prependTo('#slider_images');\/\/clone the last image and put it at the front\r\n<\/span>   $('#slider_images').css({'left':-1*$imgWidth+'px'});\/\/reset the slider so the first image is still visible\r\n<\/span>   \r\n   $('#endless_slider_right').click(function(){\r\n      $('#slider_images').stop(true,true); \/\/complete any animation still running - in case anyone's a bit click happy... \r\n<\/span>      var $newLeft = $('#slider_images').position().left-(1*$imgWidth);\/\/calculate the new position which is the current position minus the width of one image\r\n<\/span>      $('#slider_images').animate({'left':$newLeft+'px'},function(){\/\/slide to the new position...\r\n<\/span>         if (Math.abs($newLeft) == (($imgCount+1)*$imgWidth)) \/\/...and if the slider is displaying the last image, which is the clone of the first image...\r\n<\/span>            {\r\n            $('#slider_images').css({'left':-1*$imgWidth+'px'});\/\/...reset the slider back to the first image without animating \r\n<\/span>            }\r\n         });\r\n      return false;\r\n   });\r\n   \r\n   $('#endless_slider_left').click(function(){\r\n      $('#slider_images').stop(true,true); \/\/complete any animation still running  \r\n<\/span>      var $newLeft = $('#slider_images').position().left+(1*$imgWidth);\/\/calculate the new position which is the current position plus the width of one image\r\n<\/span>      $('#slider_images').animate({'left':$newLeft+'px'},function(){\/\/slide to the new position\r\n<\/span>         if (Math.abs($newLeft) == (0)) \/\/if the slider is displaying the first image, which is the clone of the last image\r\n<\/span>            {\r\n            $('#slider_images').css({'left':-($imgCount)*$imgWidth+'px'});\/\/reset the slider back to the last image without animating \r\n<\/span>            }\r\n\t});\r\n   return false;\r\n   });\r\n\r\n})<\/pre>\r\n\r\n\r\n\r\n
The logic<\/h3>\r\n
The slider container, here #slider_box<\/code> has overflow hidden. The images are contained within an absolutely positioned div, #slider_images<\/code> which has its width set to the number of images, plus two, times the image width. I’m then cloning the first image, and placing it at the end of the images, and cloning the last image and placing it before the first image. <\/p> \r\n\r\n
I’m animating the left and right click events by changing the left position of #slider_images<\/code> by the width of an image. Then, at the completion of each animation, I’m checking the left position to see if I’m at the end of the images, displaying a cloned image, and if so swapping back to the original image. So, if I’m displaying the last image, which is the cloned first image, I change the position again, without animating, back to displaying the orginal non-cloned first image. This swap is invisible to the user and hence we give the appearance of an infinite loop.<\/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