?
Solved

jQuery Carousel: loop mixes up order

Posted on 2010-04-07
6
Medium Priority
?
782 Views
Last Modified: 2012-05-09
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

0
Comment
Question by:hankknight
  • 3
  • 3
6 Comments
 
LVL 2

Accepted Solution

by:
Saphira earned 2000 total points
ID: 30021169
What does the function .index() with ywo arguments?
0
 
LVL 16

Author Comment

by:hankknight
ID: 30023058
That just counts how many total <li> items there are.

Is there something wrong with my math?
0
 
LVL 2

Expert Comment

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

try this
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
LVL 2

Expert Comment

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

Open in new window

0
 
LVL 16

Author Comment

by:hankknight
ID: 30024711
No, your code does not work.  Could you please test it to see if I am doing something wrong?  Thanks.
0
 
LVL 16

Author Comment

by:hankknight
ID: 30064720
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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

607 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question