javascript - Toggle Animate css classes on slick carousel slide change - Stack Overflow

admin管理员组

文章数量:1291084

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="" alt="">
    <div class="caption">
      <h3>We push the edge of</h3>
      <h2>what’s<br/>possible.123</h2>
    </div>
  </div>
  <div>
    <img src="" 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

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./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./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

• javascript
• jquery
• slick.js
• animate.css

Share Improve this question Follow edited Nov 20, 2019 at 7:13 Zuber asked Jan 4, 2019 at 5:49 ZuberZuber 3,48311 gold badge2121 silver badges3636 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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();  

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

本文标签： javascriptToggle Animate css classes on slick carousel slide changeStack Overflow