Question

我希望在光滑滑块加载后以及在其中一个滑块具有类.class-slide之后在body标签上添加类。

HTML

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

所以在光滑加载之后，如果带有类.class-slide的幻灯片处于活动状态，那么我需要一个关于标记的演示类。

我试过这个

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

但由于DOM已经加载，因此无法正常工作。我们如何解决这个问题？

Link to Codepen

Answer 1

请检查以下代码。每次幻灯片后，更改事件都会触发。我们可以检查带有类class-slide的div是否有效。如果具有类class-slide的div处于活动状态，则类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

滑动滑块包含事件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');
    }
});

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

滑动滑块加载后运行脚本

3 个答案: