title: Slick.js repeat event for multiple sliders
body: <p>I am using slick.js for a long scroll with multiple sliders. Each slider responds to click events set by links above it, using the slickGoTo method as navigation. </p>
  
  <p>I want to add an active class to the links afterChange of each slide whether by swiping or slicking the slick prev/next arrows. Ive got it working on the first slider on the page, but it doesnt for the subsequent sliders.</p>
  
  <p>The simple fix would be slider syncing, but I havent been able to get it to work when there are multiple of the same slider class in the way the slider syncing is shown in <a href="http://kenwheeler.github.io/slick/" rel="nofollow">the slick documentation</a>.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="leak-slider"&gt;
      &lt;div class="slider-dots"&gt;
          &lt;a class="link pulse active"&gt;link 1 &lt;/a&gt;
      &lt;/div&gt; &lt;!-- /.slider-dots --&gt;
      &lt;div class="slider-dots"&gt;
          &lt;a class="link pulse active"&gt;link 2 &lt;/a&gt;
      &lt;/div&gt; &lt;!-- /.slider-dots --&gt;
      &lt;div class="slider-dots"&gt;
          &lt;a class="link pulse active"&gt;link 3 &lt;/a&gt;
      &lt;/div&gt; &lt;!-- /.slider-dots --&gt;
  &lt;/div&gt;
  
  &lt;div class="expanded-slider"&gt;
      &lt;div class="expanded-content"&gt;
          &lt;h3 class="expanded-title"&gt;Title of each slide&lt;/h3&gt;
  
          &lt;p&gt;content&lt;/p&gt;
      &lt;/div&gt;  &lt;!-- /.expanded-content --&gt;
  
      &lt;div class="expanded-content"&gt;
          &lt;h3 class="expanded-title"&gt;Title of each slide&lt;/h3&gt;
  
          &lt;p&gt;content&lt;/p&gt;
      &lt;/div&gt;  &lt;!-- /.expanded-content --&gt;
  
      &lt;div class="expanded-content"&gt;
          &lt;h3 class="expanded-title"&gt;Title of each slide&lt;/h3&gt;
  
          &lt;p&gt;content&lt;/p&gt;
      &lt;/div&gt;  &lt;!-- /.expanded-content --&gt;
  &lt;/div&gt; &lt;!-- /.expanded-slider --&gt;
  </code></pre>
  
  <p>The above markup is wrapped in containers for each section of the page</p>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>  var $expandedSlider = $('.expanded-slider').slick({
      arrows: true,
      infinite: false,
      slidesToShow: 1,
      slidesToScroll: 1
    });
  
    $('.slider-dots').on('click', function(){
      var slideIndex = $(this).index(),
        dot = $(this),
        dotLink = dot.children('.link'),
        currentSlide = $expandedSlider.slick('slickCurrentSlide');
  
      // toggle active class on click of dots
      dotLink.addClass('active');
      dot.siblings().children('.link').removeClass('active');
  
      //Navigate to Slide
      $expandedSlider.slick('slickGoTo', parseInt( slideIndex ));
    });
  
    // toggle active class on change of slide
    $expandedSlider.on('afterChange', function(event, slick, direction){
      var slider = $(this),
        currentSlide = slider.slick('slickCurrentSlide'),
        dot = $('.slider-dots').eq(currentSlide),
        dotLink = dot.children('.link');
  
      dotLink.addClass('active');
      dot.siblings().children('.link').removeClass('active');
    });
  </code></pre>