「slick」スライダーをWPで使う
仕様例
WPサイトにてレスポンシブ対応でPC＞タブレット＞スマホで表示数を変化させる
先ずhttps://kenwheeler.github.io/slick/より最新のパッケージを一式DLし、
テーマファイル内のCSSディレクトリにslick.cssとslick-theme.cssを加え、
同階層にfontsフォルダとajax-loader.gifも同封し、サーバーにアップ＞上記CSS2つをhead内で読み込む。
次にslick.min.jsをfooter下部で読み込む。
既に導入済みのプラグインなどの兼ね合いでjquery.min.jsとjquery-migrate.min.jsが読み込まれている場合はこの2つは気にしなくてよい。
ファイルを分けるかテンプレート内にてslick.min.jsの後で以下も読み込む。
一旦こう記述してみた 最終版はこちら
jQuery(document).on('ready', function() {
jQuery('#target').slick({
autoplay: true,
dots: false,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [{
breakpoint: 1080,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 680,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}]
});
});jsの1行目をjQuery(function($){ ～ としてしまうと、環境によってはスライドはなんとなく動くが、slidesToShowなどのオプションが全く機能しないので、DOMが読み込まれたタイミングで実行してやる。
コンソールにエラーが出ている
Uncaught TypeError: Cannot read properties of null (reading ‘add’)
ググったらいくつかヒントが出てきたのだが、
https://www.codegrepper.com/code-examples/javascript/Uncaught+TypeError%3A+Cannot+read+property+%27add%27+of+null+slick+slider
を参考に対応してみたが、特に変化がなかった。エラーは気持ち悪いので、以後要調査。
【追記】最終的にこうした
jQuery(document).ready( function($) {
$('#target').not('.slick-initialized').slick(
{
autoplay: true,
dots: false,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [{
breakpoint: 1500,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: true
}
},
{
breakpoint: 680,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}]
});
});jsを</body>の近くで記述していたのと、on(‘ready’)との組み合わせがクセものだったらしく、
2回処理が走っていた＋記述の位置による不具合（結果位置は変更していない）のようだと先輩から指摘を受けたので、
まず1行目を上記コードのように変更し、2行目（参考サイト）の.not(‘.slick-initialized’)が晴れて効くようになり、エラーも消えた。