在slick滑块加载后运行脚本

Question

我想在body标签上添加类，在滑动滑块加载后，其中一个滑块具有class . class -slide。

HTML

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

因此，在slick加载后，如果带有.class-slide类的幻灯片是活动的，那么我需要一个标签上的demo类。

我试过了

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

但是，因为DOM已经加载，所以这不会起作用。我们该如何解决这个问题呢？

Link to Codepen

Answer 1

请检查下面的代码。在每一张幻灯片上，afterChange事件都会触发。我们可以检查带有class类的div -slide是否激活。如果div with class 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');
    }
});

Answer 2

Slick slider有event init，可以像这样使用

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

Answer 3

如果您不想等到第一张幻灯片更改，例如，如果自动播放速度设置为几秒，则可以使用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');
    }
});

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