Слайк Карусель целевой активный слайд, чтобы добавить и удалить классы анимации

Question

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

Итак, когда 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Так что моя ошибка может быть элементарной. Я искал в Интернете много часов, пытаясь выяснить, что мне нужно делать...

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

Сделав это, я смог добавить класс.hidden к моим элементам p в html. Теперь я успешно нацеливаю свои элементы при смене слайдов, что обеспечивает более плавную анимацию.

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