Question

我正试图通过ken wheeler将我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动态生成。我定位上述HTML代码中的p元素。 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上的p元素中。现在，当幻灯片进出时，我已经成功地定位了我的元素，这使得动画更加流畅。

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

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

1 个答案: