Повторное событие Slick.js для нескольких слайдеров

Question

Я использую slick.js для длинного прокрутки с несколькими слайдерами. Каждый слайдер отвечает на события кликов, установленные ссылками над ним, используя метод slickGoTo в качестве навигации.

Я хочу добавить активный класс к ссылкам afterChange каждого слайда, прокручивая или перетаскивая пятно prev/next стрелки. Ive заставил его работать с первым слайдером на странице, но это не для последующих слайдеров.

Простым исправлением будет синхронизация слайдера, но я не смог заставить его работать, когда несколько одинаковых слайдеров в способе синхронизации слайдера отображаются в the slick documentation.

HTML

<div class="leak-slider"> 
    <div class="slider-dots"> 
     <a class="link pulse active">link 1 </a> 
    </div> <!-- /.slider-dots --> 
    <div class="slider-dots"> 
     <a class="link pulse active">link 2 </a> 
    </div> <!-- /.slider-dots --> 
    <div class="slider-dots"> 
     <a class="link pulse active">link 3 </a> 
    </div> <!-- /.slider-dots --> 
</div> 

<div class="expanded-slider"> 
    <div class="expanded-content"> 
     <h3 class="expanded-title">Title of each slide</h3> 

     <p>content</p> 
    </div> <!-- /.expanded-content --> 

    <div class="expanded-content"> 
     <h3 class="expanded-title">Title of each slide</h3> 

     <p>content</p> 
    </div> <!-- /.expanded-content --> 

    <div class="expanded-content"> 
     <h3 class="expanded-title">Title of each slide</h3> 

     <p>content</p> 
    </div> <!-- /.expanded-content --> 
</div> <!-- /.expanded-slider --> 

выше разметки заворачивают в контейнерах для каждой секции страницы

JQuery

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'); 
    }); 

Answer 1

сделал вывод, что пятно метод afterchange слушает все изменить события в инициализированном классе. поэтому с несколькими ползунками, использующими один и тот же класс, невозможно, чтобы событие изменения происходило только на этом слайдере.