Continuous jQuery looping with slides
<p>Right now the code I have scrolls through each slide as you click the next button, but when it reaches the end of the slides it fast forwards back to the first slide and the same with the previous button. What I want to do is when it reaches the last slide to just bring up the first slide right behind it again, just like a continuous rotation. Any help would be appreciated : ) Here's my code:</p>

<pre><code>&lt;script type="text/javascript"&gt;                                                                                                                                                                                                                                             
  $(document).ready(function(){ 

    ts = $('#slider ul li').size();
    i=1;
    speed = 1000;

    $('#slider ul li').first().css({'opacity':'1'});

    $('#nextBtn').click(function(){
      if (i==ts) {i = 0; $('#slider ul li').animate({'opacity':1},'fast'); };             
      $('#slider ul').animate({'top':(0-i)*280+'px'},speed);
      $('#slider ul li').eq(i).animate({'opacity':1},speed);
      $('#slider ul li').eq(i-1).animate({'opacity':1},speed);
      i++;
      return false;
    });

    $('#prevBtn').click(function(){
      if (i==1) {i = ts+1; $('#slider ul li').eq(0).animate({'opacity':1},speed); console.log('oops');}             
      $('#slider ul').animate({'top':-1*(i-2)*280+'px'},speed);
      $('#slider ul li').eq(i-3).delay(100).animate({'opacity':1},speed);
      $('#slider ul li').eq(i-2).animate({'opacity':1},speed);
      $('#slider ul li').eq(i-1).animate({'opacity':1},speed);
      i=i-1;
      return false;
    });

  });
&lt;/script&gt;
</code></pre>
