Добавление класса к текущему слайду с помощью Slick Slider

Question

У меня есть небольшая проблема со слайдером Slick, которую я надеюсь решить.

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

Полагаю, это было бы больше похоже на переключение классов, чем просто добавление класса.

$('.latest-slider').slick({
infinite: true,
slidesToShow: 1,
speed:800,
slidesToScroll: 1,
autoplay: false,
arrows:false,
centerMode: true,
}); 

// On after slide change
$('.latest-slider > .slick-slide').on('afterChange', function(event, slick, currentSlide){
$(this).toggleClass('active-class');
});

Это то, что я пробовал, но, похоже, это не работает.Может кто-нибудь предложить какой-либо совет по этому поводу?

РЕДАКТИРОВАТЬ

$('.latest-slider .slick-slide').on('afterChange', function(event, slick, currentSlide, nextSlide){
  $(currentSlide).removeClass('fancy-class');
  $(nextSlide).addClass('fancy-class');
  //console.log(nextSlide);
});

Answer 1

Слайдер Slick имеет обратный вызов beforeChange для этой цели.

<div class="your-class">
    <div>
        <img src="https://image.shutterstock.com/display_pic_with_logo/2402987/467823860/stock-photo-table-with-food-top-view-467823860.jpg">
    </div>
    <div>
        <img src="https://i.kinja-img.com/gawker-media/image/upload/s--U4p7aVXr--/c_scale,f_auto,fl_progressive,q_80,w_800/cqjqqduljubkqkglhgrz.jpg">
    </div>
    <div>
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-d0Umq4tB7JWvT6U3JmqKBmyqCwtSokJTKM9eor38ITZUyoP8OA">
    </div>
</div>

$('.your-class').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    $(".your-class").find('div').removeClass("current-slide");
    $(".your-class").find('div').eq(nextSlide).addClass("current-slide");
});