我有一个页面,其中包含多个 Slick 轮播。当第一张幻灯片处于事件状态时,我需要将一个类应用于轮播容器。
如何更新以下代码,以便将类应用于与用户正在交互的轮播相匹配的正确轮播?
<div class="carousel" height="50px">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
<div class="carousel" height="50px">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
<script>
$(document).ready(function(){
$('.carousel').slick();
$('.carousel').on('afterChange', function(event, slick, currentSlide) {
// how to select the correct carousel here??
$(this).eq(currentSlide).addClass('first-slide-is-active');
});
});
</script>
最佳答案
$(document).ready(function(){
$('.carousel').each(function() {
$(this).slick();
$(this).on('afterChange', function(event, slick, currentSlide) {
$(this).eq(currentSlide).addClass('first-slide-is-active');
});
});
});
循环遍历每个.carousel
,如果您需要在单击按钮时选择轮播作为示例,则可以将 $(this) 设置为变量。
关于javascript - 如何确定用户正在与 Slick Carousel 中的哪个轮播进行交互?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35299671/