title: Jquery Flexslider Add and Remove Class on Slide Change
body: <p>I'm using the jquery plugin <a href="http://www.woothemes.com/flexslider/" rel="nofollow">Flexslider</a>. I'm using the carousel as navigation for the slider. I'm trying to add a css class "active" to the first carousel element when the page loads, then remove the "active" class from the first element as the user chooses another element and add the "active" class to the next element the user chooses. </p>
  
  <p>The carousel was working fine as a navigation, but when I used the "start function" in the carousel to add the active class as suggested below, the slider stops moving and just stays on one slide. It's strange it will work for 3-4 clicks and then won't keep moving...</p>
  
  <p>Ideas?</p>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>&lt;script type="text/javascript" charset="utf-8"&gt;
      $(window).load(function() {
          // The slider being synced must be initialized first
          $('#clientthumbs').flexslider({
              animation: "slide",
              controlNav: false,
              animationLoop: true,
              directionNav: true, 
              slideshow: false,
              itemWidth: 210,
              itemMargin: 20,
              asNavFor: '#clienttestimonials',
              start : function(slider) {
                  $('#clientthumbs li').click(function(event) {
                   event.preventDefault();                     
                   $('#clientthumbs li').removeClass('active');                    
                   $(this).addClass('active');
                   $('.flexslider').show();
                   var slideTo = $(this).attr("rel"); //Grab rel value from link;
                   var slideToInt = parseInt(slideTo); 
                   if (slider.currentSlide != slideToInt) {
                      $(this).addClass('active');
                      slider.flexAnimate(slideToInt) //Move the slider to the correct slide (Unless the slider is also already showing the slide we want);
                   }
  
  
                  });
                 }  
          });
  
          $('#clienttestimonials').flexslider({
              animation: "slide",
              controlNav: false,
              directionNav: false, 
              animationLoop: false,
              slideshow: false,
              sync: "#clientthumbs"
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="clientthumbs" class="flexslider"&gt;
    &lt;ul class="slides"&gt;
      &lt;li class="client1"&gt;&lt;/li&gt;
      &lt;li class="client2"&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div  id="clienttestimonials" class="flexslider"&gt;
    &lt;ul class="slides"&gt;
      &lt;li&gt;
        &lt;div class="clientpicsandquotes"&gt;  
        &lt;/div&gt;       
      &lt;/li&gt;
      &lt;li&gt;
        &lt;div class="clientpicsandquotes"&gt; 
        &lt;/div&gt;   
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>