Как сделать так, чтобы AOS не работал со слайдером Slick?

Я использую AOS, чтобы показать элементы HTML на прокрутке. Это работает хорошо само по себе, но когда я использую его на страницах, которые содержат слайдер Slick, элементы, к которым применяется AOS, не отображаются. Элементы скрыты, и если имеется много прокрутки, похоже, что браузер выдает неверную информацию AOS о текущей позиции прокрутки, а некоторые элементы отображаются последними.

Нет конкретного кода, который создает эти проблемы, любое использование Slick на той же странице с AOS делает AOS не работает.

Кто-нибудь решил эту проблему, я видел некоторые нерешенные вопросы на других сайтах и ​​не нашел решения?

Источник

5 ответов

Решение

Я наконец нашел решение этой проблемы. Мне удалось заставить анимацию работать на первом слайде, но это не сработало на других слайдах, поэтому я использовал гладкие события 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(); после гладкой инициализации

Источник

Вы должны инициировать 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
      }
    }
  ]
});
Источник

В моем случае я устанавливаю обновление 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();
});
Источник 
      jQuery(document).ready(function(){
<br>//content<br>
AOS.refresh();
<br>});

ПомещатьAOS.refresh()в конец функции загрузки. Элемент будет показан обратно.

Источник 
$(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);
                });
            });
        }
    });
Источник
Другие вопросы по тегам