Slick Carousel 目标活动幻灯片添加和删除动画类

Question

我正在尝试将 ken wheeler 的 slick carousel 中的 active slide 作为目标，以将动画添加到该幻灯片中的 p 元素。

因此，当 slide 处于活动状态时，p 元素将弹回（或其他内容），然后当幻灯片过渡到下一张幻灯片时，动画将应用于新的p 元素。幻灯片循环播放后，动画 class 将连续应用于 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-activeclass是由slick carousel动态生成的。我的目标是上述 HTML 代码中的 p 元素。 animated bounce classes 绑定到生成动画的 css。

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

Answer 1

问题在于如何在 slick carousel 提供的 afterChange 和 beforeChange 事件期间添加和删除 classes。

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 class 添加到 html 上的 p 元素中。现在，当幻灯片进出时，我已经成功地定位了我的元素，这使得动画更加流畅。

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

Slick Carousel 目标活动幻灯片添加和删除动画类

Slick Carousel target active slide to add and remove animation classes

javascript

jquery

carousel

toggleclass

slick.js