如何使 AOS 不能与 Slick 滑块一起使用？

Question

我正在使用 AOS 在滚动时显示 html 元素。它单独运行良好，但是当我在包含 Slick 滑块的页面上使用它时，应用 AOS 的元素没有显示。元素是隐藏的，如果有很多滚动，看起来浏览器向 AOS 提供了有关当前滚动位置的错误信息，并且稍后显示了一些元素。

没有导致此问题的特定代码，在与 AOS 相同的页面上使用 slick 会使 AOS 无法正常工作。

有人解决了这个问题吗，我在其他网站上看到一些悬而未决的问题并没有找到任何解决方案？

Answer 1

您必须在滑块启动后启动 Aos。 我认为您必须考虑到所有以前的滑块。

    // On init event
$('#productsCarousel').on('init', function(event, slick){
  console.log('#productsCarousel init');

        AOS.init({
            easing: 'ease-out-back',
            duration: 1000
        });
});

$('#productsCarousel').slick({
  centerMode: true,
  centerPadding: '8%',
  prevArrow: '<span class="slick-prev slick-btn"><span class="p-3"><span class="icon-prev"></span></span></span>',
  nextArrow: '<span class="slick-next slick-btn"><span class="p-3"><span class="icon-next"></span></span></span>',
  slidesToShow: 4,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});

Answer 2

在我的例子中，我在巧妙的初始化之后放置了 AOS 刷新

$(window).on('load', function() {

    AOS.init({
        duration: 600,
        once: true
    });

    $('.section-product-container').slick({
        dots: true,
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3,
    });

    $('.slide-container').slick({
        dots: true,
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: true,
        speed: 300,
        autoplay: true,
        fade: true,
        cssEase: 'linear',
        customPaging : function(slider, i) {
            var number = (i+1);
            if ((i+1) < 10)
                number = '0'+(i+1);
            return '<a>'+ number +'</a>';
        }
    });

    $('.section-customer-container').slick({
        dots: true,
        infinite: true,
        slidesToShow: 5,
        slidesToScroll: 5,
        customPaging : function(slider, i) {
            if ((i+1) < 10)
                return '<a>0'+(i+1)+'</a>';
            return '<a>'+ i +'</a>';
        }
    });

    AOS.refresh();
});

Answer 3

$(document).ready(function () {

        $('#hero-slider').on('init', function (e, slick) {

            var$firstAnimatingElements = $('div.hero-slide:first-child').find('[data-animation]');

            doAnimations($firstAnimatingElements);

        });

        $('#hero-slider').on('beforeChange', function (e, slick, currentSlide, nextSlide) {

            var$animatingElements = $('div.hero-slide[data-slick-index="' + nextSlide + '"]').find('[data-animation]');

            doAnimations($animatingElements);

        });

        $('#hero-slider').slick({

            // autoplay: true,

            // autoplaySpeed: 10000,

            dots: true,

            fade: true

        });

        functiondoAnimations(elements) {

            varanimationEndEvents = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

            elements.each(function () {

                var$this = $(this);

                var$animationDelay = $this.data('delay');

                var$animationType = 'animated ' + $this.data('animation');

                $this.css({

                    'animation-delay': $animationDelay,

                    '-webkit-animation-delay': $animationDelay

                });

                $this.addClass($animationType).one(animationEndEvents, function () {

                    $this.removeClass($animationType);
                });
            });
        }
    });

Answer 4

我终于找到了解决这个问题的方法。 我设法在第一张幻灯片上制作动画，但它在其他幻灯片上不起作用，所以我使用了漂亮的事件 beforeChange 和 afterChange。第一次我删除了，第二次我添加了“aos-animate”类。我尝试使用 AOS.refresh() 和 AOS.refreshHard() 但没有帮助

这是我的解决方案

$('#homeslider')
        .on('beforeChange', function() {
            $('.slider_title').removeClass("aos-animate");
            $('.slider_subtitle').removeClass("aos-animate");
            $('.small_cta').removeClass("aos-animate");
            $('.big_cta').removeClass("aos-animate");
            // AOS.refreshHard(); this didn't work
        })
        .on('afterChange', function(event, slick, currentSlide) {
            $('.slider_title').addClass("aos-animate");
            $('.slider_subtitle').addClass("aos-animate");
            $('.small_cta').addClass("aos-animate");
            $('.big_cta').addClass("aos-animate");
            // AOS.refreshHard(); this didn't work
        });

这些类是每张幻灯片的一部分，每个类都有这样的类

<div class="slider_title" data-aos="zoom-in" data-aos-delay="300"></div>

还有一件事，我添加了 AOS.init();平滑初始化后