I use jQuery/jCarousel. The carousel should be looped, so that when you get to the last item, the next item should be the first item. But the order is wrong! 1,2,3,4,5,7,9,4,9, Instead of: 1,2,3,4,5,6,7,8,9 Is something wrong with my math? Please test my code and help me get this to loop correctly, thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> <head profile="http://gmpg.org/xfn/11"> <title> Demo </title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> /** * This <div> element is wrapped by jCarousel around the list * and has the classname "jcarousel-container". */ .jcarousel-container { position: relative; } .jcarousel-clip { z-index: 2; padding: 0; margin: 0; overflow: hidden; position: relative; } .jcarousel-list { z-index: 1; overflow: hidden; position: relative; top: 0; left: 0; margin: 0; padding: 0; } .jcarousel-list li, .jcarousel-item { float: left; list-style: none; /* We set the width/height explicitly. No width/height causes infinite loops. */ width: 75px; height: 75px; } /** * The buttons are added dynamically by jCarousel before * the <ul> list (inside the <div> described above) and * have the classnames "jcarousel-next" and "jcarousel-prev". */ .jcarousel-next { z-index: 3; display: none; } .jcarousel-prev { z-index: 3; display: none; } /* -------------------------------------------- */ /* ------------ LARGE (INDEX PAGE) ------------ */ /* -------------------------------------------- */ .jcarousel-skin-atlantica .jcarousel-container { background: transparent; margin: 0 auto; } .jcarousel-skin-atlantica .jcarousel-container-horizontal { width: 936px; padding-left: 30px; padding-right: 30px; } .jcarousel-skin-atlantica .jcarousel-clip-horizontal { width: 936px; height: 292px; } .jcarousel-skin-atlantica .jcarousel-item { width: 458px; height: 284px; padding: 3px; border: 1px solid #e0e0e0; } .jcarousel-skin-atlantica .jcarousel-item-horizontal { margin-right: 4px; } .jcarousel-skin-atlantica .jcarousel-item-placeholder { background: transparent; color: #000; } /** * Horizontal Buttons */ .jcarousel-skin-atlantica .jcarousel-next-horizontal { position: absolute; top: 120px; right: 30px; width: 30px; height: 54px; cursor: pointer; background: transparent url(http://opalia-occasions.riprod.fr/components/com_ezautos/library/slideshow/images/arrow_right.gif) no-repeat 0 0; } .jcarousel-skin-atlantica .jcarousel-prev-horizontal { position: absolute; top: 120px; left: 30px; width: 30px; height: 54px; cursor: pointer; background: transparent url(http://opalia-occasions.riprod.fr/components/com_ezautos/library/slideshow/images/arrow_left.gif) no-repeat 0 0; } /* -------------------------------------------- */ /* ------------ SMALL (ABOUT THE STUDIO PAGE) ------------ */ /* -------------------------------------------- */ .jcarousel-skin-atlantica-small .jcarousel-container { background: transparent; margin: 0 auto; } .jcarousel-skin-atlantica-small .jcarousel-container-horizontal { width: 936px; padding-left: 30px; padding-right: 30px; } .jcarousel-skin-atlantica-small .jcarousel-clip-horizontal { width: 936px; height: 140px; border-bottom: 1px dotted #c2c2c2; border-top: 1px dotted #c2c2c2; padding: 15px 0; } .jcarousel-skin-atlantica-small .jcarousel-item { width: 210px; height: 130px; padding: 3px; border: 1px solid #e0e0e0; } .jcarousel-skin-atlantica-small .jcarousel-item-horizontal { margin-right: 20px; } .jcarousel-skin-atlantica-small .jcarousel-item-placeholder { background: #fff; color: #000; } /** * Horizontal Buttons */ .jcarousel-skin-atlantica-small .jcarousel-next-horizontal { position: absolute; top: 55px; right: 30px; width: 30px; height: 54px; cursor: pointer; background: transparent url(http://opalia-occasions.riprod.fr/components/com_ezautos/library/slideshow/images/arrow_right.gif) no-repeat 0 0; } .jcarousel-skin-atlantica-small .jcarousel-prev-horizontal { position: absolute; top: 55px; left: 30px; width: 30px; height: 54px; cursor: pointer; background: transparent url(http://opalia-occasions.riprod.fr/components/com_ezautos/library/slideshow/images/arrow_left.gif) no-repeat 0 0; } /* -------------------------------------------- */ /* ------------ Gallery (PORTFOLIO PAGE) ------------ */ /* -------------------------------------------- */ .jcarousel-skin-atlantica-gallery .jcarousel-container { background: transparent; margin: 0 auto; } .jcarousel-skin-atlantica-gallery .jcarousel-container-horizontal { width: 936px; padding-left: 30px; padding-right: 30px; } .jcarousel-skin-atlantica-gallery .jcarousel-clip-horizontal { width: 936px; height: 610px; border-top: 1px dotted #c2c2c2; } .jcarousel-skin-atlantica-gallery .jcarousel-item { width: 210px; height: 575px; } .jcarousel-skin-atlantica-gallery .jcarousel-item-horizontal { margin-right: 25px; padding: 15px 0; } .jcarousel-skin-atlantica-gallery .jcarousel-item-horizontal img { margin-bottom: 10px; padding: 3px; border: 1px solid #e0e0e0; } .jcarousel-skin-atlantica-gallery .jcarousel-item-placeholder { background: #fff; color: #000; } /** * Horizontal Buttons */ .jcarousel-skin-atlantica-gallery .jcarousel-next-horizontal { position: absolute; top: 290px; right: 30px; width: 30px; height: 54px; cursor: pointer; background: transparent url(http://opalia-occasions.riprod.fr/components/com_ezautos/library/slideshow/images/arrow_right.gif) no-repeat 0 0; } .jcarousel-skin-atlantica-gallery .jcarousel-prev-horizontal { position: absolute; top: 290px; left: 30px; width: 30px; height: 54px; cursor: pointer; background: transparent url(http://opalia-occasions.riprod.fr/components/com_ezautos/library/slideshow/images/arrow_left.gif) no-repeat 0 0; } </style> <script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.pack.js"></script> <script type="text/javascript"> $(document).ready(function(){ function cBefore (carousel, item, i, state, evt) { var ii = carousel.index(i, ($("#mycarousel li").length)); carousel.remove(i); carousel.add(i, $("#mycarousel li:nth-child("+ii+")").html()); } function cAfter (carousel, item, i, state, evt) { carousel.remove(i); } // Activate jCarousel function carouselCallback(carousel) { // Disable autoscrolling if the user clicks the prev or next button. carousel.buttonNext.bind('click', function() { carousel.startAuto(0); }); carousel.buttonPrev.bind('click', function() { carousel.startAuto(0); }); // Pause autoscrolling if the user moves with the cursor over the clip. carousel.clip.hover(function() { carousel.stopAuto(); }, function() { carousel.startAuto(); }); }; jQuery('#mycarousel').jcarousel({ auto: 8, wrap: 'circular', animation: 'slow', scroll: 1, initCallback: carouselCallback, itemVisibleInCallback: {onBeforeAnimation: cBefore}, itemVisibleOutCallback: {onAfterAnimation: cAfter} }); }); </script> </head> <body> <div class="gallery"> <ul id="mycarousel" class="jcarousel-skin-atlantica-small"> <li> <a href="#"><img src="http://www.designofsignage.com/application/symbol/hands/image/600x600/hand-1-one.jpg" alt="1" title="1" width="210" /></a></li> <li> <a href="#"><img src="http://www.designofsignage.com/application/symbol/hands/image/600x600/hand-2-two.jpg" alt="1" title="2" width="210" /></a></li> <li> <a href="#"><img src="http://www.designofsignage.com/application/symbol/hands/image/600x600/hand-3-three.jpg" alt="1" title="3" width="210" /></a></li> <li> <a href="#"><img src="http://www.designofsignage.com/application/symbol/hands/image/600x600/hand-4-four.jpg" alt="1" title="4" width="210" /></a></li> <li> <a href="#"><img src="http://www.designofsignage.com/application/symbol/hands/image/600x600/hand-5-five.jpg" alt="1" title="5" width="210" /></a></li> <li> <a href="#"><img src="http://www.designofsignage.com/application/symbol/hands/image/600x600/hand-6-six.jpg" alt="1" title="6" width="210" /></a></li> <li> <a href="#"><img src="http://www.designofsignage.com/application/symbol/hands/image/600x600/hand-7-seven.jpg" alt="1" title="7" width="210" /></a></li> <li> <a href="#"><img src="http://www.designofsignage.com/application/symbol/hands/image/600x600/hand-8-eight.jpg" alt="1" title="8" width="210" /></a></li> <li> <a href="#"><img src="http://www.designofsignage.com/application/symbol/hands/image/600x600/hand-9-nine.jpg" alt="1" title="9" width="210" /></a></li> <li> <a href="#"><img src="http://www.designofsignage.com/application/symbol/hands/image/600x600/hand-10-ten.jpg" alt="1" title="10" width="210" /></a></li> </ul> </div> <div class="clear"></div> </body> </html>