Slick slider on('afterChange')

Question

I am trying to find option or method that gives me ability to change animation of active slider content before or after change. For example I have Slick slider called 'slider-header' and it has three <h1> tags inside like:

<div id="slider-header">
    <div>
        <h1>First header</h1>
        <h1>Second header</h1>
        <h1>Third header</h1>
    </div>
</div>

I would like to slideOut(to left side) the first header with a little delay, then second header with the same delay, third header as well and only THEN I would like to change for next slide.
After change on the next slide, I would like those headers to appear in the same way but from the OTHER side. I could reach only slide out to the left side with setTimeout() function and 'slickNext' method, but I have no idea how can I make them appear on the next slide from the other side in the same delay way.

Answer 1

Slick slider has its own event called afterChange, and also as argument, it has currentSlide and nextSlide which you can use to make animations.

$('#slider-header > div').on('afterChange', function(event, slick, currentSlide, nextSlide){
    console.log(nextSlide);
});