Toggle Animate css classes on slick carousel slide change

Question

I am making a slider using slick carousel and i want caption animation using animate css while the slide is active.

The animation works fine on first slide when load but after that, the animation is not working on other slides.

Here is my HTML

<div id="hero-slider">
  <div>
    <img src="http://lorempixel.com/1920/500/abstract/1" alt="">
    <div class="caption">
      <h3>We push the edge of</h3>
      <h2>what’s<br/>possible.123</h2>
    </div>
  </div>
  <div>
    <img src="http://lorempixel.com/1920/500/abstract/2" alt="">
    <div class="caption">
      <h3>We push the edge of</h3>
      <h2>what’s<br/>possible.456</h2>
    </div>
  </div>
</div>

Here is the SCSS

body {
  padding: 0;
  margin: 0;
}
#hero-slider {
    .caption {
        position: absolute;
        left: 10%;
        top: 10%;

        h2,h3 {
            color: white;
        }
    }
}

and the jQuery which i am using

$(document).ready(function(){
$('#hero-slider').slick({
  autoplay: true,
  autoplaySpeed: 4000,
  dots: true,
  fade: true
});

if ($('.slick-slide').hasClass('slick-active')) {
    $('.caption').addClass('animated fadeInLeft');
  } else {
    $('.caption').removeClass('animated fadeInLeft');
  }
});

Here is the Fiddle

Misvalue

Answer 1

You need to reapply the animation to each slide you can do something like this, beforeChange will trigger before each slide in this you are first removing the classes and then applying slowly, so from that you can easily add the class again and show the effect.

 $("#hero-slider").on("beforeChange", function() {

    $('.caption').removeClass('animated fadeInLeft').hide();
    setTimeout(() => {    
      $('.caption').addClass('animated fadeInLeft').show();

    }, 1000);

  })

Demo

alternatively, you can use delay too

  $('.caption').removeClass('animated fadeInLeft')
  .hide().delay(1000).addClass('animated fadeInLeft').show();  

Nootka

its working exactly as i wanted, Appreciate that...Thanks very much... Cheers – Misvalue

Answer 2

Here is my solution without setTimeout: http://jsfiddle.net/tshmycL5/5/

Preconception