jQuery Carousel: loop mixes up order

I am using jQuery to make a carousel.  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

<!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;
}

.jcarousel-next {
    z-index: 3;
    display: none;
}

.jcarousel-prev {
    z-index: 3;
    display: none;
}

.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;
}
    
.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>

Open in new window

LVL 16
hankknightAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

SaphiraCommented:
What does the function .index() with ywo arguments?
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
hankknightAuthor Commented:
That just counts how many total <li> items there are.

Is there something wrong with my math?
0
SaphiraCommented:
I'm not really sure but I think that maybe .index() counts from 0 and nth-child from 1

try this
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

SaphiraCommented:
Sorry, didn't attach the code
ii++;
carousel.add(i, $("#mycarousel li:nth-child("+ii+")").html());

Open in new window

0
hankknightAuthor Commented:
No, your code does not work.  Could you please test it to see if I am doing something wrong?  Thanks.
0
hankknightAuthor Commented:
I got it working.
$(document).ready(function(){

var cTotal = $("#mycarousel li").length;

var ci=1; 
while (ci<=cTotal) { 
   window['ci'+ci] = $("#mycarousel li:nth-child("+ci+")").html(); 
   ci++; 
} 

function cBefore (carousel, item, i, state, evt) {
	var ii = carousel.index(i, cTotal);
	carousel.add(i, window['ci'+ii]); 
}


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}

    });

});

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.