jQuery infinite carousel: Previous slide movement fail

Question

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?

You only see the first `li`, when you are moving backwars there is no `li` at the left side until after the animation. When moving backwards you need to shift the last element to be the first in the list -AND- set the `ul` left position so it shows the second element. Only then start the animation — bart s, Nov 26 '12 at 11:05
I would recommend you use some paging algorithm since it is a little buggy when multiple clicks — Aatish Molasi, Nov 26 '12 at 11:28
A paging algorithm ? @AatishMolasi can you elaborate please or point to a resource? — Parijat Kalia, Nov 26 '12 at 18:47

score 1 · Accepted Answer · answered Nov 26 '12 at 11:15

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
    });
  }
}

jQuery infinite carousel: Previous slide movement fail

1 Answers1