How to start animation on active slide

Question

I am a beginner in jQuery and I'm trying to learn it by myself. But obviously there's something that I'm still missing out. I will be very grateful for your help.
I am trying to create a slider with animated content like sliding in images and texts on top of a slide background, sliding in divider etc. The content should animate every time a slide changes (becomes active slide) due to time passed (it has autorun) or arrow click.
I am using slick slider library (more info here). Every time a slide is the visible one, it gets a class 'slick-active'. So, I thought that I will create a script doing such thing: "Every time a slide gets a class 'slick-active', start to animate its images and texts". I've tried the easiest way:

    if($(".my_slide").hasClass("slick-active")){
            $(".slick-active>.my_slide_divider").animate({'width':(($(".slick-active>.my_slide_title").width() + 60)+'px')});
        }

but, obviously, worked only with the first slide. Then, I've searched for other solutions and found MutationObserver but failed:

    var activeSlide = $(".slick-active");
        var observer = new MutationObserver(function(mutations) {
          mutations.forEach(function(mutation) {
            if (mutation.attributeName === "class") {
              var attributeValue = $(mutation.target).prop(mutation.attributeName);
            }
          });
        });
        observer.observe(activeSlide[0], {
          attributes: true
        });
    if (attributeValue == 'slick-active'){
        $(this).find('.my_slide_divider').animate({'width':(($(".slick-active>.my_slide_title").width() + 60)+'px')});
    }

So I would like to ask you to help me with this one. How to run animation every time a slide changes its class to 'slick-active'?
Here's my HTML:

 <div class="variable-width">
        <span class="my_slide">
            <img class="my_slide_bg" src="img/pampers_bg_sharp.jpg" />
            <img src="img/pampers_1.png" alt="" class="my_slide_item" />
            <span class="my_slide_title">Pampers/P&G</span>
            <span class="my_slide_divider"></span>
            <span class="my_slide_description">Lorem ipsum dolor sit amet</span>
    <span class="my_slide">
            <img class="my_slide_bg" src="img/heinekken_bg_sharp.jpg" />
            <img src="img/heinekken_1.png" alt="" class="my_slide_item" />
            <span class="my_slide_title">Heinekken</span>
            <span class="my_slide_divider"></span>
            <span class="my_slide_description">Lorem ipsum dolor sit amet</span>
    <span class="my_slide">
            <img class="my_slide_bg" src="img/drgreen_bg_sharp.jpg" />
            <img src="img/drgreen_1.png" alt="" class="my_slide_item" />
            <span class="my_slide_title">dr Green</span>
            <span class="my_slide_divider"></span>
            <span class="my_slide_description">Lorem ipsum dolor sit amet</span>
        </span>

Thank you in advance for your help.

Answer 1

You can use slick slider events to do this

$(".slider").on("afterChange", function (event, slick, currentSlide){
   $("<find your element>").animate({'width':(($(".slick-active>.my_slide_title").width() + 60)+'px')});
})

You need to find your element which you want to animate from currentSlide parameter and use that in above line.

Answer 2

Just watched your code, have you set an event listener to make you trigger and check you if condition?

For example in slick, it is on doc -> event:

// On swipe event
$('.your-element').on('swipe', function(event, slick, direction){
  console.log(direction);
  // left
});

// On edge hit
$('.your-element').on('edge', function(event, slick, direction){
  console.log('edge was hit')
});

// On before slide change
$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  console.log(nextSlide);
});

Or you selector might not be work after init the slick, $(".slick-active>.my_slide_divider"), you used > here, it will only affect .slick-active's child .my_slide_divider, not all .my_slide_divider inside .slick-active. Because of slick.js will inject a wrapper on your slider, it is because the plug-in needs to calculate the size of your element, window, etc.

So, please make a demo to show us, if the above two solutions do not work.