title: Cycle 'active' Class with Carousel
body: <p>I have a carousel with nine slides, the first of which has a class of 'active'.</p>
  
  <pre><code>&lt;ul class='nav'&gt;
      &lt;li class='left'&gt;left&lt;/li&gt;
      &lt;li class='right'&gt;right&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul class='carousel'&gt;
      &lt;li class='active'&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>When the 'right' button is clicked, the active class needs to move to the next li (it also needs to be applied back to the first li after the last one).</p>
  
  <p>And obviously, the active class needs to move in the opposite direction when the left button is clicked.</p>
  
  <p>I tried the following, which works up to a point, but I don't know how to make the active class go back to the first li after the last one.</p>
  
  <pre><code>$('.nav .right').click(function(){
      $('.carousel .active').removeClass('active').next().addClass('active');
  });
  </code></pre>
  
  <p>Any help would be appreciated. Thanks.</p>