Переключение классов Animate css при смене слайдов на скользкой карусели - PullRequest
Новая
       23

Переключение классов Animate css при смене слайдов на скользкой карусели

0 голосов
/ 04 января 2019

Я делаю слайдер, используя 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');
  }
});

Вот Скрипка

Ответы [ 2 ]

0 голосов
/ 04 января 2019

Вот мое решение без setTimeout: http://jsfiddle.net/tshmycL5/5/

0 голосов
/ 04 января 2019

Вам нужно повторно применить анимацию к каждому слайду, вы можете сделать что-то вроде этого, перед тем, как в каждом слайде сработать перед тем, как в этом слайде вы сначала удаляете классы, а затем применяете медленно, поэтому вы можете легко добавить класс снова и показатьЭффект. 

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

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

    }, 1000);

  })

Демо

в качестве альтернативы, вы также можете использовать задержку 

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