Гладкий слайдер, анимация работает только на первом слайде - PullRequest
Новая
       35

Гладкий слайдер, анимация работает только на первом слайде

0 голосов
/ 28 сентября 2019

Я использую скользящий слайдер, чтобы перемещать изображения на моей странице.Я также использую анимацию над заголовками на каждом слайде.Эти анимации запускаются при прокрутке.Поскольку слайдер уже виден при загрузке страницы, я использовал .trigger ('scroll') в функции window.scroll ().Это нормально работает для первого слайда, анимация запускается напрямую, но когда появляются другие слайды, мне нужно прокрутить, чтобы запустить анимацию.Вы знаете, что я делаю не так?Я хотел бы запускать другую анимацию каждый раз, когда показывается слайд.

Спасибо за вашу помощь. 

$('.home-slider').slick({
  autoplay: true,
  autoplaySpeed: 6000,
  speed: 250,
  lazyLoad: 'progressive',
  pauseOnHover: false,
  infinite: true,
  arrows: false,
  dots: true,
  cssEase: 'ease-in-out',
  loop: true
});


function loadAnimations(items) {
  var offset = $(window).scrollTop() + $(window).height();
  if (items.length == 0) {
    $(window).off('scroll', loadAnimations);
  }
  items.each(function(i) {
    var element = $(this),
    animationClass = element.attr("data-animation"),
    animationDelay = element.attr('data-animation-delay');
    element.css({
      '-webkit-animation-delay': animationDelay,
      '-moz-animation-delay': animationDelay,
      'animation-delay': animationDelay
    });

    if((element.offset().top + element.height() - 20) < offset) 
    {
      element.addClass('animated').addClass(animationClass);
    }
  });
}


$(window).scroll(function () {
  loadAnimations($('.animate'));
}).trigger('scroll');       
<section class="home-slider">
  <div class="slide overlay" style="background-image: url(img/slides/slide-corporate-1bis.jpg); margin: 0; background-size: cover; color: #fff; background-position: top right;height:700px;">
    <div class="slide-content">
      <div class="slide-content-headings">
        <h2 class="text-color-light animate" data-animation="fadeInUp">A way to manage your freight bills</h2>
        <p class="mt-4 animate" data-animation="fadeInUp" data-animation-delay="0.2s"A company incorporated in Brussels, Belgium by its founder in 2004.</p>
      </div>
    </div>
  </div>

  <div class="slide overlay" style="background-image: url(img/slides/slide-corporate-1bis.jpg); margin: 0; background-size: cover; color: #fff; background-position: top right; height:700px;">
    <div class="slide-content">
      <div class="slide-content-headings">
        <h2 class="text-color-light animate" data-animation="fadeInUp">Your essential link between supply chain</h2>
        <p class="mt-4 animate" data-animation="fadeInUp" data-animation-delay="0.2s">Content</p>
      </div>
    </div>
  </div>
</section>
...