先日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
WebプロダウションKOHIMOTO Inc.が発信を通して成長していくためのラボ🧪 IT企業出身。世界中の人へ発信できるWebサイトを通じて、社会がより良い方向へアップデートしていく為に日々学び、技術を生かしていきます。