Слайд-карусель целевого активного слайда для добавления и удаления классов анимации

Question

Я пытаюсь настроить таргетинг active slide на мой slick carousel с помощью ken wheeler, чтобы добавить анимацию к элементу 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, поэтому моя ошибка может быть элементарной. Я искал в Интернете в течение многих часов, пытаясь выяснить, что мне нужно сделать ...

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

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