So, I am attempting to build an infinite jQuery carousel and it's working pretty well in one direction but not in another. Well it is working in another, but only sort of.
To make infinite manipulation happen, this is what I do:
if(navId == 'forward')
{
$('#slides ul').animate({'left':left_indent},1200, function(){
$('#slides li:last').after($('#slides li:first'));
$('#slides ul').css({'left':0});
} );
}
if(navId == 'backward')
{
$('#slides ul').animate({'left':right_indent},1200, function(){
$('#slides li:first').before($('#slides li:last'));
$('#slides ul').css({'left':0});
} );
As you can see, it is just some subtle dom manipulation and it works perfectly for 'forward' but for 'backward', it is glitchy. You can check it out here @ JSFIDDLE
I have done some tricks to counter this, but none of them are working. Anybody know what's up?
In addition to my comment, your fiddle which can do two way
function slideshow()
{
var item_width = $('#slides li').outerWidth(true);
var old_left = parseInt($('#slides ul').css('left'));
var left_indent = old_left - item_width;
var right_indent = old_left + item_width;
var navId = $(this).attr('id');
if(navId == 'forward')
{
$('#slides ul').animate({'left':left_indent},1200, function(){
$('#slides li:last').after($('#slides li:first'));
$('#slides ul').css({'left':0});
});
}
if(navId == 'backward')
{
$('#slides li:first').before($('#slides li:last')); // <<< different
$('#slides ul').css({'left':-485}); // <<< different
$('#slides ul').animate({'left':0},1200, function(){// <<< different
});
}
}