Slick Carousel目标活动幻灯片添加和删除动画类 [英] Slick Carousel target active slide to add and remove animation classes

问题描述

我正试图通过ken wheeler在我的光滑的轮播中定位活动幻灯片来添加动画该幻灯片中的p元素。

I am trying to target the active slide in my slick carousel by ken wheeler to add an animation to the p element within that slide.

因此，当幻灯片处于活动状态时， p 元素将反弹（或某种东西），然后当幻灯片转换到下一张幻灯片时，动画将应用于新的p元素。幻灯片循环后，动画类将继续应用于光滑的轮播。

So, when the slide is active, the p element will bounce in (or something), then when the slide transitions to the next slide, the animation will be applied to the new p element. After the slides have looped, the animated class will be continuously applied to the 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 由我使用的其他程序动态生成。

The images and several classes are dynamically generated by other programs I use.

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 类是动态的由光滑的轮播生成。我的目标是上面HTML代码中的 p 元素。 动画反弹类与生成动画的css绑定。

The .slick-active class is dynamically generated by the slick carousel. I am targeting the p element in the above HTML code. The animated bounce classes are tied to css that generate the animation.

我是<$ c $的新手c> Javascript / jQuery ，所以我的错误可能是基本的。我已经在网上搜索了好几个小时，试图找出我需要做的事情......

I am very new to Javascript/jQuery, so my mistake could be elementary. I have searched the web for many hours now trying to find out what I need to do...

推荐答案

问题在于如何在光滑轮播提供的afterChange和beforeChange事件期间添加和删除类。

The issue was in how classes were added and deleted during the afterChange and beforeChange events provided by the slick carousel.

Javascript：

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

By doing this, I was able to add the .hidden class to my p elements on the html. Now I've successfully targeted my elements when slides are changed in and out, which makes for smoother animation.

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

Please note, this caused the first slide to have an error upon load. My workaround is to have the hidden class not on the first slide...

这篇关于Slick Carousel目标活动幻灯片添加和删除动画类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！