title: Toggle Animate css classes on slick carousel slide change
body: <p>I am making a slider using <code>slick carousel</code> and i want <code>caption</code> animation using <code>animate</code> css while the slide is <code>active</code>.</p>
  
  <p>The animation works fine on first slide when load but after that, the animation is not working on other slides.</p>
  
  <p>Here is my <code>HTML</code></p>
  
  <pre><code>&lt;div id="hero-slider"&gt;
    &lt;div&gt;
      &lt;img src="http://lorempixel.com/1920/500/abstract/1" alt=""&gt;
      &lt;div class="caption"&gt;
        &lt;h3&gt;We push the edge of&lt;/h3&gt;
        &lt;h2&gt;what’s&lt;br/&gt;possible.123&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="http://lorempixel.com/1920/500/abstract/2" alt=""&gt;
      &lt;div class="caption"&gt;
        &lt;h3&gt;We push the edge of&lt;/h3&gt;
        &lt;h2&gt;what’s&lt;br/&gt;possible.456&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the <code>SCSS</code></p>
  
  <pre><code>body {
    padding: 0;
    margin: 0;
  }
  #hero-slider {
      .caption {
          position: absolute;
          left: 10%;
          top: 10%;
  
          h2,h3 {
              color: white;
          }
      }
  }
  </code></pre>
  
  <p>and the <code>jQuery</code> which i am using</p>
  
  <pre><code>$(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');
    }
  });
  </code></pre>
  
  <p>Here is the <a href="http://jsfiddle.net/tshmycL5/" rel="nofollow noreferrer">Fiddle</a></p>