Question

我正在使用slick carousel制作滑块，并且希望在幻灯片为caption时使用animate css制作active动画。

该动画在加载时在第一张幻灯片上工作正常，但之后在任何幻灯片上均不工作。

这是我的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>

这里是SCSS

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

        h2,h3 {
            color: white;
        }
    }
}

和我正在使用的jQuery

$(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');
  }
});

这里是Fiddle

Answer 1

您需要将动画重新应用于每张幻灯片，然后才能执行以下操作，在此幻灯片中的每张幻灯片之前，beforeChange将触发，您首先要删除类，然后慢慢应用，这样您就可以轻松地再次添加类并显示效果。

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

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

    }, 1000);

  })

Demo

或者，您也可以使用延迟

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

Answer 2

这是我没有setTimeout的解决方案：http://jsfiddle.net/tshmycL5/5/

在圆滑的轮播幻灯片更改上切换Animate CSS类

2 个答案: