title: How can I cycle a class on 3 elements
body: <p>I'm using <a href="http://www.gmarwaha.com/jquery/jcarousellite/" rel="nofollow noreferrer">jCarouselLite</a> to cycle between 3 elements. I've setup the plugin to do this fine, including 3x <code>.bulletX</code> which slides to each element, i.e. bullet 1 slides to element 1, etc. </p>
  
  <p>However what I want is to cycle the class <code>.active</code> on the <code>.bulletX</code> to designate which element is being shown, similar to nivoslider. </p>
  
  <pre><code>&lt;div class="bullet1"&gt;If this is clicked, is leads to element1&lt;/div&gt;
  &lt;div class="bullet2"&gt;If this is clicked, is leads to element2&lt;/div&gt;
  &lt;div class="bullet3"&gt;If this is clicked, is leads to element3&lt;/div&gt;
  </code></pre>
  
  <p>I feel like there is something I can do with <code>.addClass</code> and <code>.removeClass</code>, but can't quite get the semantics of a loop in my head. </p>
  
  <p><code>.active</code> applied to <code>.bullet2</code> manually</p>
  
  <p><img src="https://i.stack.imgur.com/BTxBA.png" alt="enter image description here"></p>
  
  <p>Edit Full HTML </p>
  
  <pre><code>&lt;div class="twwetHolder"&gt;
      &lt;div class="tweet"&gt;
       &lt;ul&gt;
          &lt;li&gt;
              &lt;div&gt;element 1&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;div&gt;element 2&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;div&gt;element 3&lt;/div&gt;
          &lt;/li&gt;
       &lt;/ul&gt;
  
      &lt;/div&gt;  
  &lt;div class="bullet1"&gt;&lt;/div&gt;
  &lt;div class="bullet2"&gt;&lt;/div&gt;
  &lt;div class="bullet3"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>