title: Slick Slider - Applying slick active class to <a> according to active slide
body: <p>Im trying to add 'slick active' class to an a tag when the slide has been dragged. The class is applied on click but cant work out how to apply it to the other!</p>
  
  <p>Any help deciphering my code would be much appreciated!</p>
  
  <p>JS</p>
  
  <pre><code>$(document).ready(function() {
  
      var $slideshow = $(".slider").slick({
          dots: false,
          infinite: true,
          speed: 300,
          slidesToShow: 1,
          adaptiveHeight: true,
          swipeToSlide: true,
          touchThreshold: 3,
          arrows: false
      });
  
      $('.links').on('click', 'a', function( e ) {
          var slideIndex = $(this).closest('li').index();
  
          $slideshow.slick( 'slickGoTo', parseInt( slideIndex ) );
          $('.links li a').removeClass('slick-current');
          $(this).addClass('slick-current');
          e.preventDefault();
      });
  
  
      $('.slider').on('afterChange', function(event,slick,i) {
          $('.links li a .slick-slide').removeClass('slick-current');
          $('.links li a .slick-slide').eq(i).addClass('slick-current');  
      });
  
      $('.links li a .slick-slide').eq(0).addClass('slick-current');  
  
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code> &lt;div class="large-3 columns page-content-left"&gt;
  
        &lt;ul class="links"&gt;
             &lt;li&gt;&lt;a href="#"&gt;slide1&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;slide2&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;slide3&lt;/a&gt;&lt;/li&gt;
  
        &lt;/ul&gt;
  
   &lt;/div&gt;
  
  &lt;div id="" class="large-9 columns page-content-right"&gt;                             
     &lt;section class="slider" id="slider1"&gt;
  
        &lt;div class="slide"&gt;
        &lt;/div&gt;
        &lt;div class="slide"&gt;
        &lt;/div&gt;
        &lt;div class="slide"&gt;
        &lt;/div&gt;
  
    &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>