先日Wordpressを使ったサイトの中でSlickを使ってスライドを作ったときに、今まで起きたことがない挙動になりました。
Slick自体は機能しているのですが、PCのブラウザで画面を広げたり縮めたりした際に、レスポンシブにならないという事象です。
WPで読み込まれているJqueryとあとから読み込んだJqueryがバッティングしていた
結論からいうと私のサイトでは、Jqueryが2つ読みこまれた状態になっており、解決した方法は下記です。
・新たに読み込んだJqueryは削除
・WPでもとからよみこまれていたJqueryを使用
・Slick箇所の$(function(){ … }の書き出しを以下に変更
|
jQuery(function($){ $('.slick-slider').slick({ slidesToShow: 1, arrows: true, dots: false, autoplay: false, }); }); |
こちら↓の参考にしたサイトにも記述があるように、そもそもWordpressでJqueryを動かすには一工夫が必要なようですが、
「
jQueryで動くslick.jsが動作しない理由はflexboxが理由かも……?」
私の場合、Wordpress用の元から読み込まれていたJqueryをオフったり、$をすべてJqueryに置き換えてみてもダメだったので、上記の記述になりました。
KOHIMOTO LABO
東京・吉祥寺でKOHIMOTO Inc.というWebサイト制作の会社をやっているエンジニアとデザイナーが、発信を通して成長していくためのラボ🧪 IT企業出身。サイト制作を通じて微力ながら社会が良くなる手助けをしたいと思っている。