slick.js - 如何使 AOS 不与 Slick slider 一起工作？

Question

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

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

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

Answer 1

slider 启动后，您必须启动 Aos。我认为您必须考虑之前的所有 slider 。

    // 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
      }
    }
  ]
});