Correcting the sliding animation of a custom carousel

Question

I'll even share my code with you!

Basically, I have a carousel that I built from the bottom up - Now, it works fine when there is more than one product being shown.

When there is only one product shown, then the animation jumps in IE (surprise...). Anyone have and idea how I could fix this up?

My jQuery for the sliding:

$(leftButton).click(function(){
    var item_width = 205;
    var left_indent = parseInt($('ul#carousel_ul').css('left')) + (item_width);
    var $currElement = $('ul#carousel_ul li:last');
    $($currElement).prependTo('ul#carousel_ul');
    $('ul#carousel_ul').css({'left':-left_indent});

    $('ul#carousel_ul:not(:animated)').animate({'left' : 0},carouselSpeed,function(){       
        $('#carousel_ul').css({'left':0}); //css fix
    }); 
});
$(rightButton).click(function(){ 
    var item_width = 205;
    var position = $('ul#carousel_ul').position();
    var left_indent = parseInt(position.left + item_width);

    $('ul#carousel_ul:not(:animated)').animate({'left' : left_indent},carouselSpeed,function(){
        var $currElement = $('ul#carousel_ul li:first'); 
        if ($.browser.msie) {
            $('ul#carousel_ul').css({'left':'11px'}); 
        } else {
            $('ul#carousel_ul').css({'left':'0px'}); 
        }

        $($currElement).hide().appendTo('ul#carousel_ul');
        $($currElement).show();
    });
    return false; 
});

And my HTML:

<div id="carousel_inner">
    <ul id="carousel_ul">
        <li name="1"></li>
        <li name="2"></li>
        <li name="3"></li>
        <li name="4"></li>
        <li name="5"></li>
        <li name="6"></li>
        <li name="7"></li>
        <li name="8"></li>
        <li name="9"></li>
    </ul>
</div>

And finally, my CSS:

div#carousel_inner {
    float:left; 
    width:205px;
    height: 125px;
    min-height: 115px;
    margin-left: 25px;
    position: relative;
    overflow: hidden; 
    z-index: 75;
}
ul#carousel_ul {
    position:relative;
    left:0px;
    list-style-type: none; 
    margin: 0 auto;
    padding: 0px;
    width:9999px; /* important */
    height: 115px;
    min-height: 115px;
    bottom: 35px;
    z-index: 75;
}

Answer 1

Try replace this piece of code:

$('ul#carousel_ul:not(:animated)').animate({'left' : 0},carouselSpeed,function(){       
   $('#carousel_ul').css({'left':0}); //css fix
}); 

With this:

$('ul#carousel_ul').stop().animate({'left' : 0},carouselSpeed,function(){       
   $('#carousel_ul').css({'left':0}); //css fix
}); 

Answer 2

The code you've used to get the css left value here:

var left_indent = parseInt($('ul#carousel_ul').css('left')) + (item_width);

Will produce something like 100px and not 100, so you cannot add that to your item_width, because that would result in some math like 100px+300 which is incorrect. Try this:

var position = $('ul#carousel_ul').position();
var left_indent = parseInt(position.left + item_width);

position.left will return the left position of the object, while position.top will return the top position.

• Reference: http://api.jquery.com/position/

Answer 3

Try an absolute position like so:

ul#carousel_ul {
    position:absolute;
    left:0;
    list-style-type: none; 
    margin: 0 auto;
    padding: 0;
    width:9999px; /* important */
    height: 115px;
    min-height: 115px;
    bottom: 35px;
    z-index: 75;
}

And where you wrote /* important */ did you not mean !important?? NOTE - Your carousal may now be positioned wrong, but at least test to see if it is FUNCTIONING properly with the above css...