javascript - Slick Carousel 目标事件幻灯片添加和删除动画类

Question

我正在尝试将 ken wheeler 制作的 slick carousel 中的 active slide 作为目标，以将动画添加到该幻灯片中的 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>

图像 和几个类 是由我使用的其他程序动态生成的。

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 动态生成。我的目标是上述 HTML 代码中的 p 元素。 animated bounce 类绑定(bind)到生成动画的 css。

我是 Javascript/jQuery 的新手，所以我的错误可能很简单。我已经在网上搜索了好几个小时，试图找出我需要做什么...

Answer 1

问题在于如何在 slick carousel 提供的 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 上的 p 元素中。现在，当幻灯片进出时，我已经成功地定位了我的元素，这使得动画更加流畅。

请注意，这导致第一张幻灯片在加载时出现错误。我的解决方法是让隐藏类不在第一张幻灯片上...