Run Script after slick slider loads

Question

I want to add class on body tag after the slick slider loads and after one of the slider has 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>

So after the slick has loaded and if the slide with class .class-slide is active then i need a demo class on tag.

I tried this

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

but since the DOM is already loaded this wont work . How can we fix this ?

Link to Codepen

Answer 1

Slick slider has event init and can be used like this

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

Answer 2

please check below code. On every slide afterChange event will fire. And we can check in it that div with class class-slide is active or not. If div with class class-slide is active then class body-class will be added in body otherwise it will be removed.

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');
    }
});