title: Smooth circular animation in html list
body: <p>I have html list ,  want to animate it left to right , but when it reach at the last point , it should rotate to its first position. Want only to show 3 elements is mandatory.</p>
  
  <p>Current behavior : It is not circular. </p>
  
  <p>I have tried this</p>
  
  <pre><code>var $elements = $("#itemsListBox ul li");
  var count = $elements.length;
  
  $('.pp_arrow_previous').bind('click',function(){
  
      total=(Math.floor(count/6))*480;
      var e=$('#slider').css("left");
      e=parseInt(e);
      e=Math.abs(e);
  
      if(e==0)
  
      {
          $('#slider').css({ position: 'absolute' });
          $('#slider').css({ left: -(total)+'px' });
      }
      else
          $('#slider').animate({left: "+=480"}, "fast");
  
      //alert("Slider left is : "+e);
  
  });
  
  $('.pp_arrow_next').bind('click',function(){
  
      var e=$('#slider').css("left");
  
      total=(Math.floor(count/6))*480;
      e=parseInt(e);
      e=Math.abs(e);
      if(total&lt;=e)
      {
          $('#slider').css({ position: 'absolute' });
          $('#slider').css({ left: '0px' });
  
      }
      else
          $('#slider').animate({left: "-=480"}, "fast");
  
  });
  </code></pre>
  
  <p>Here is my fiddle <a href="http://jsfiddle.net/AtweK/2/" rel="nofollow">http://jsfiddle.net/AtweK/2/</a></p>