title: Flexslider thumbnail carousel active class is not working properly
body: <p>I'm trying to implement Slider with text as control nav instead of thumbnail using flexslider. Everything is working fine but the carousel slider synced with main slider is not getting the 'flex-active-slide' class properly. The first 'li' is getting the class name but not for others.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
              jQuery(window).load(function(){
              jQuery( '#carousel' ).flexslider({
                   animation: "slide",
                  animationLoop: false,
                  controlNav: false,
                  directionNav: false,
                  slideshow: false,
                  direction: "vertical",
                  asNavFor: '#flexslider'
              });
  
              jQuery( '#flexslider' ).flexslider({
                  animation: 'slide',
                  slideshowSpeed: 4000,
                  animationSpeed: 600,
                  pauseOnAction: true,
                  pauseOnHover: false,
                  controlNav: false,
                  directionNav: false,
                  prevText: 'Previous',
                  nextText: 'Next',
                  controlsContainer: 'flexslider',
                  sync: "#carousel"
              });
          });
              &lt;/script&gt;
  &lt;div id="flexslider" class="flexslider" style="height:auto;"&gt;
  &lt;ul class="slides"&gt;
  &lt;li&gt;
  &lt;a href="#"&gt;
  &lt;img src="images/img1.jpg" alt="Revitalising govt schools" class="ca-image"  /&gt;&lt;/a&gt;
  &lt;div class="content"&gt;
  &lt;a href="#"&gt;Revitalising govt schools&lt;/a&gt;&lt;div class='go-more'&gt;&lt;p class='sub-text'&gt;Let's educate for a better world&lt;/p&gt;&lt;a href='#' class='more'&gt;Please Donate&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
  &lt;a href="#" title="Revitalising govt schools"&gt;
  &lt;img src="images/img1.jpg" alt="Revitalising govt schools" class="ca-image"  /&gt;&lt;/a&gt;
  &lt;div class="content"&gt;
  &lt;a href="#" title="Revitalising govt schools"&gt;Revitalising govt schools&lt;/a&gt;&lt;div class='go-more'&gt;&lt;p class='sub-text'&gt;Let's educate for a better world&lt;/p&gt;&lt;a href='#' class='more'&gt;Please Donate&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="carousel" class="flexslider"&gt;
  &lt;ul class="slides"&gt;
  &lt;li&gt;
  &lt;div class="excerpt"&gt;&lt;p&gt;This will be the excerpt text for this space&lt;/p&gt;&lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
  &lt;div class="excerpt"&gt;&lt;p&gt;This will be the excerpt text for this space 2&lt;/p&gt;&lt;/div&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is how I have coded. I am able to control the slider using the text carousel but the active slide indicator is just not happening for anything other than the first carousel slide. Flexslider version used it 2.7.1</p>
  
  <p><strong>Update</strong></p>
  
  <p>Just made a demo on this issue for your easy reference. 
  <a href="https://codepen.io/haridev/pen/MqJErr" rel="nofollow noreferrer">https://codepen.io/haridev/pen/MqJErr</a></p>