asked on

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

ASKER CERTIFIED SOLUTION

Saphira

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

hankknight

ASKER

That just counts how many total <li> items there are.

Is there something wrong with my math?

Saphira

I'm not really sure but I think that maybe .index() counts from 0 and nth-child from 1

try this

Saphira

Sorry, didn't attach the code

ii++;
carousel.add(i, $("#mycarousel li:nth-child("+ii+")").html());

Open in new window

hankknight

ASKER

No, your code does not work. Could you please test it to see if I am doing something wrong? Thanks.

hankknight

ASKER

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