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

2020/03/16

またまた個人的備忘録。

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

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

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

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

$(function() {
	$('.slick_box').on('init', function(event, slick){
		console.log('.slick_box init');
		AOS.init(); // ここがAOS
	});
	$('.slick_box').slick({ // ここからslickオプション
		arrows: false,
		autoplay: true,
		autoplaySpeed: 0,
		cssEase: 'linear',
		speed: 10000,
		slidesToShow: 6,
		slidesToScroll: 1,
		pauseOnHover: false,
	});
});

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

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