[Solved] - How to make AOS not working with Slick slider? - Ayush Shrestha || UI/UX || Front-end || Angular || React || Wordpress

Question 1:

I am using AOS to show html elements on scroll. It works well alone, but when I use it on the pages that contains Slick slider, the elements on which is AOS applied are not showing. Elements are hidden and if there is a lot scroll, it looks like the browser gives wrong information to AOS about current scrolling position and some elements are shown latter.

There is no specific code that makes this problems, any usage of slick on the same page with AOS makes AOS not working.

Did anyone solved this problem, I saw some pending questions on other websites and didn’t find any solution?

Answers 1:
In my case, I put AOS refresh after slick initializations

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

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

    $('.slick-hero').slick({
        dots: true,
        infinite: true,
        slidesToShow: 2,
        slidesToScroll: 2
    });

    $('.slick-hero').slick({
        dots: true,
        infinite: true,
        slidesToShow: 2,
        slidesToScroll: 2
    });

    $('.slick-hero').slick({
        dots: true,
        infinite: true,
        slidesToShow: 5,
        slidesToScroll: 5
    });

    AOS.refresh();
});