Question

I have made a custom jQuery carousel from bits I have picked up off the net, but I cannot get it working correctly.

All that happens is that the carousel works but keeps sliding left. And after some debugging I found that the left of the carousel_ul keeps on subtracting by the image width but does not return to -960 like I believe it should.

I have seen a few articles on here about carousels but none that use the approach I am going for.

Here’s my code:

HTML:

<div id="carousel_container">
        <div id="carousel_inner">   
            <ul id="carousel_ul">
                <li>
                    <img src="http://static.shopify.com/s/files/1/0167/9164/t/5/assets/carousel-item-1.jpg?1321" alt="" />
                </li>
                <li>
                        <img src="http://static.shopify.com/s/files/1/0167/9164/t/5/assets/carousel-item-2.jpg?1321" alt="" />
                </li>
                <li>
                        <img src="http://static.shopify.com/s/files/1/0167/9164/t/5/assets/carousel-item-3.jpg?1321" alt="" />
                </li>
                <li>
                        <img src="http://static.shopify.com/s/files/1/0167/9164/t/5/assets/carousel-item-4.jpg?1321" alt="" />
                </li>
            </ul>                       
        </div>
    </div>

CSS:

    #carousel_ul {  
position:relative;  
left:-960px; /* important (this should be negative number of list items width(including margin) */  
list-style-type: none; /* removing the default styling for unordered list items */  
margin: 0px;  
padding: 0px;  
width:9999px; /* important */  
/* non-important styling bellow */  
padding-bottom:0px;  
}  

#carousel_ul li{  
float: left; /* important for inline positioning of the list items */  
width:960px;  /* fixed width, important */  
/* just styling bellow*/  
padding:0px;  
height:300px;  
background: #000000;  
margin-top:0px;  
margin-bottom:0px;  
margin-left:0px;  
margin-right:0px;  
}  

#carousel_ul li img {  
.margin-bottom:-4px; /* IE is making a 4px gap bellow an image inside of an anchor (<a href...>) so this is to fix that*/  
/* styling */  
cursor:pointer;  
cursor: hand;  
border:0px;  
}  

jQuery:

jQuery(document).ready(function ($) {
//rotation speed and timer
var speed = 2000;
var run = setInterval('rotate()', speed);   

 jQuery('#carousel_ul li:first').before(jQuery('#carousel_ul li:last'));
});

//a timer will call this function, and the rotation will begin :)  
function rotate() {
var item_width = jQuery('#carousel_ul li').outerWidth() ; 

//calculate the new left indent of the unordered list  
var left_indent = parseInt(jQuery('#carousel_ul').css('left')) - item_width;  

//alert(left_indent);

//make the sliding effect using jquery's anumate function '  
jQuery('#carousel_ul').animate({'left' : left_indent},{queue:false, duration:1000},function(){  

    //get the first list item and put it after the last list item (that's how the infinite effects is made) '  
    jQuery('#carousel_ul li:last').after(jQuery('#carousel_ul li:first'));  

    //and get the left indent to the default -960px  
    jQuery('#carousel_ul').css({'left' : '-960px'});  
});
}

It was butchered from a couple of examples.

As it happens I could not get any to work as I wanted.

Answer 1

The reason it is not working is because the animate function is not getting fired. By simply setting the duration only, the carousel will function correctly to your requirements.

//make the sliding effect using jquery's anumate function '  
jQuery('#carousel_ul').animate({'left' : left_indent}, 1000,function(){  

    //get the first list item and put it after the last list item (that's how the infinite effects is made) '  
    jQuery('#carousel_ul li:last').after(jQuery('#carousel_ul li:first'));  

    //and get the left indent to the default -960px  
    jQuery('#carousel_ul').css({'left' : '-960px'});  
});

Once you are happy with your carousel I would recommend refactoring it into a jQuery plugin or widget to allow for easy reuse.