加载滑块后运行Script

Run Script after slick slider loads

本文关键字：运行 Script 加载      更新时间：2023-09-26

我想在滑动条加载后和其中一个滑动条有class .class-slide之后在body标签上添加class .

HTML 

 <div class="slider">
  <div class="slide">
    1
  </div>
  <div class="slide">
    2
  </div>
  <div class="slide class-slide">
    3
  </div>
</div>

所以在光滑加载之后，如果带有。class-slide类的幻灯片是活动的，那么我需要在标签上添加一个演示类。

I tried this

jQuery(function () {
 if(jQuery(".class-slide").hasClass("slick-active")){
   jQuery(body).addClass('body-class');
 }

，但由于DOM已经加载，这不会工作。如何解决这个问题?

链接到Codepen

光滑滑块具有事件init，可以像这样使用

$('.your-element').on('init', function(event, slick){
    // event subscriber goes here
});

请检查下面的代码。在每张幻灯片上，afterChange事件都会触发。我们可以检查div with class class-slide是否活动。如果div class-slide是活动的，那么body-class将被添加到body中，否则它将被移除。

jQuery('.slider').on('afterChange', function(event, slick, currentSlide){
    if(jQuery(".class-slide").hasClass("slick-active")){
       jQuery(body).addClass('body-class');
    }else{
       jQuery(body).removeClass('body-class');
    }
});

如果你不想等到你的第一张幻灯片已经改变，例如，如果你的自动播放速度设置为几秒，你可以使用setPosition事件。

jQuery('.slider').on('setPosition', function(event, slick, currentSlide){
    if(jQuery(".class-slide").hasClass("slick-active")){
       jQuery(body).addClass('body-class');
    }else{
       jQuery(body).removeClass('body-class');
    }
});

我对此进行了测试，回调在滑块安排每张幻灯片后立即运行。

相关文章：