南国スキーぶろぐ・Z

岩手県盛岡市のネタを中心としたお出掛け雑記ブログ

【備忘録】AOSとslickの共存方法

にほんブログ村 地域生活(街) 東北ブログ 盛岡情報へにほんブログ村 地域生活(街) 東北ブログ 岩手県情報へ

Web ,

またまた個人的備忘録。

WEBサイトのスライダーとして定番中の定番であるSlick
要素を下から右から左から簡単にヒュンヒュン動きをつけることができるAOS

どちらも便利なjQueryだけど、相性が悪いみたいで共存させると動きませんでした。
AOSの設定をした要素が表示されなくなりました。
動かないんじゃなくて消えました。

いろいろ調べた結果、AOSはサイトの高さを割り出して要素に動きをつけるけど、Slickがスライダーとして使用する複数枚の写真の読み込みが終わる前にAOSが高さを計算しちゃって、その後にSlickが機能すると高さが変わっちゃうとAOS的に高さが狂って誤作動を起こすらしいです。
nicescrollとかの高さを計算して動くjQueryって、トグルボタンとかの高さが変わる仕組みと相性悪いよね...。
なんちゃってWEBクリエイターの俺にはハードルが高いです^^;

んで、下のコードがSlickとAOSを共存させたコード。
参考サイト...と言うか助けられたサイトから備忘録として残しておきます。
要は、Slickの読み込みが終わってからAOSを動かすコードらしいです^^;

なお、Slickが無い下層ページではこのコードは使用できません。
AOS要素が消えて表示されません。
Slickを読み込んでからAOSを動かすってコードなので、Slickが無いとAOSが動かなくて当たり前です。

なので、条件分岐でSlickがあるページのみでこのコードを利用し、Slickが無いページでは普通のAOS記述が必要です。