javascript Slick Carousel 目标活动幻灯片以添加和删除动画类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29544055/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Slick Carousel target active slide to add and remove animation classes
提问by jtsama
I am trying to target the active slidein my slick carouselby ken wheeler to add an animation to the p element within that slide.
我正在尝试以active slide我slick carousel的 ken Wheeler为目标，向该幻灯片中的 p 元素添加动画。
So, when the slideis active, the pelement 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.
因此，当 处于slide活动状态时，p元素会反弹（或其他东西），然后当幻灯片转换到下一张幻灯片时，动画将应用于新的 p 元素。幻灯片循环播放后，动画类将继续应用于slick carousel.
HTML:
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>
The imagesand several classesare dynamically generated by other programs I use.
在images和一些classes动态由我使用其他程序产生。
Javascript:
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');
}
});
});
The .slick-activeclass is dynamically generated by the slick carousel. I am targeting the pelement in the above HTML code. The animated bounceclasses are tied to css that generate the animation.
所述.slick-active类被动态地产生的slick carousel。我的目标是p上述 HTML 代码中的元素。这些animated bounce类与生成动画的 css 相关联。
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...
我对 非常陌生Javascript/jQuery，所以我的错误可能是基本的。我已经在网上搜索了好几个小时，试图找出我需要做什么......
回答by jtsama
The issue was in how classes were added and deleted during the afterChange and beforeChange events provided by the slick carousel.
问题在于如何在圆滑的轮播提供的 afterChange 和 beforeChange 事件期间添加和删除类。
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');
});
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.
通过这样做，我能够将 .hidden 类添加到 html 上的 p 元素中。现在，当幻灯片进出时，我已经成功地定位了我的元素，这使得动画更流畅。
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...
请注意，这会导致第一张幻灯片在加载时出错。我的解决方法是让隐藏类不在第一张幻灯片上...
