时间戳

首页 > 解决方案 > Problem with AOS.js not working when Slick.js is on the same page

jquery - Problem with AOS.js not working when Slick.js is on the same page

问题描述

Seems to be a problem to get AOS.js working properly when there is also a Slick.js slider on the same page. How to get this working having both on the page (Slick slider need to be there)

I have included the scripts and css

<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" media="all"> 

Inserted the <div data-aos="zoom-in"></div>

And initiated the AOS.js     AOS.init();

(also tried with changing some settings differing with: delay, offset, etc. But no luck.

Seems to be a problem caused by Slick-slider. I already tried two other libs (Lax.js and Wow.js) having the same problem (It is even worse in Firefox browser though).

Any advise how to solve this? I do not see it after days of trial and error. Thanks.

This is the live sample: http://testnl10.vini4all.nl/toepassingen/glazuur (aside of the 2 column text) and on the home-page: http://testnl10.vini4all.nl/ (below the banner in the white and gray section)

标签： jqueryslick.jstypo3-10.xwow.jsaos.js

解决方案

找到了使它对我有用的解决方案。在 app.js 中插入此代码：

$(window).on("scroll", function () {
     AOS.init();
 });

通过这些问题，我终于找到了可行的解决方案： https ://github.com/michalsnik/aos/issues/635

https://github.com/kenwheeler/slick/issues/3406

推荐阅读