Slick Carousel целевой активный слайд для добавления и удаления классов анимации

Я пытаюсь нацелить active slide в моем slick carousel Кена Уилера, чтобы добавить анимацию к элементу p в этом слайде.

Итак, когда slide активен, элемент p будет отскакивать (или что-то), а затем, когда слайд переходит к следующему слайду, анимация будет применена к новому элементу p. После того, как слайды закольцованы, анимированный класс будет непрерывно применяться к slick carousel.

HTML: 

<div class="slick-promo">
    <div class="single-slide">[img code here]<p>This text will come in animated, then as the slide leaves it will have the animation class removed.</p></div>
    <div class="single-slide">[img code here]<p>Lorem ipsum blah blah</p></div>
    <div class="single-slide">[img code here]<p>lorem ipsum blah blah</p></div>
</div>

images и несколько classes являются динамически генерируется другими программами, которые я использую.

Javascript: 

jQuery(document).ready(function($){
    $('.slick-promo').slick({
      infinite: true,
      fade: true,
      cssEase: 'linear',
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 2000,
      //this is where I need help
      onAfterChange:function(slider,index){
            $('.slick-active p').toggleClass('animated bounce');
      }
    });
});

Класс .slick-active динамически генерируется классом slick carousel. Я нацелен на элемент p в приведенном выше HTML-коде. Классы animated bounce привязаны к css, которые генерируют анимацию.

Я очень новичок в Javascript/jQuery, так что моя ошибка может быть элементарной. Я искал в интернете в течение многих часов, пытаясь выяснить, что мне нужно сделать...
1 2
javascript jquery carousel

1 ответ:

Проблема заключалась в том, как классы добавлялись и удалялись во время событий afterChange и beforeChange, предоставляемых скользкой каруселью.

Javascript: 

$('.slick-promo').on('afterChange', function(event, slick, currentSlide){
    $('.slick-active p').removeClass('hidden');
    $('.slick-active p').addClass('animated bounce');
});

$('.slick-promo').on('beforeChange', function(event, slick, currentSlide){
    $('.slick-active p').removeClass('animated bounce');
    $('.slick-active p').addClass('hidden');
});
Сделав это, я смог добавить следующее .скрытый класс для моих элементов p на html. Теперь я успешно нацелился на свои элементы, когда слайды меняются внутри и снаружи, что делает более плавной анимацию.

Обратите внимание, что это вызвало ошибку первого слайда при загрузке. Мой обходной путь состоит в том, чтобы иметь скрытый класс только не на первом слайде...

5