title: How to highlight active slides in Flexslider carousel?
body: <p>Is it possible to highlight the current items in Flexslider carousel, so I can add a class to the active ones?</p>
  
  <p>I use the basic setup of the Flexslider carousel. Now I would like to have a script that will added active to each slide inside the viewport that is visible.</p>
  
  <p>This example I use:
  <a href="http://flexslider.woothemes.com/basic-carousel.html" rel="nofollow">http://flexslider.woothemes.com/basic-carousel.html</a></p>
  
  <p>I now how to get the Flexslider properties in the start function. When I give the function the parameter I can ask for - the total amount of items in the ul, how many items it will move, and how many paging there will be. I don't know if it is possible to write a formule to calculate which one is active with the given variables, so I can highlight them. </p>
  
  <pre><code>$('.flexslider').flexslider({
          animation: "slide",
          animationLoop: false,
          slideshow: false,
          itemWidth: 460,
          itemMargin: 30,
          minItems: 2,
          maxItems: 6,
          controlNav: false,
          customDirectionNav: ".custom-direction li a",
          start: function(slider) {
              var pagingCount = slider.pagingCount;
              var move = slider.move;
              var visibleSlides = slider.visible;
              var totalSlides = slider.count;
  
              console.log(slider);
              console.log(slider.move);
              console.log(slider.update);
  
  
              if (totalSlides) {
                  $('.slides li').addClass('active-slides');
  
              };
              // console.log(slider.count);
              // console.log(slider.currentSlide);
          }
  
      });
  </code></pre>
  
  <p>I have made a start, but doesn't know how the if statement or for loop should look like to get this done.</p>
  
  <p>Any ideas?
  Thanks in advance.</p>