MENU
CLOSE
CODEWEBSITE Edit : 2020.07.30 Update : 2023.03.27

WordPressサイトでSlick Sliderの動きがおかしい時に確認する事

先日Wordpressを使ったサイトの中でSlickを使ってスライドを作ったときに、今まで起きたことがない挙動になりました。
Slick自体は機能しているのですが、PCのブラウザで画面を広げたり縮めたりした際に、レスポンシブにならないという事象です。
 

WPで読み込まれているJqueryとあとから読み込んだJqueryがバッティングしていた

結論からいうと私のサイトでは、Jqueryが2つ読みこまれた状態になっており、解決した方法は下記です。
・新たに読み込んだJqueryは削除
・WPでもとからよみこまれていたJqueryを使用
・Slick箇所の$(function(){ … }の書き出しを以下に変更


こちら↓の参考にしたサイトにも記述があるように、そもそもWordpressでJqueryを動かすには一工夫が必要なようですが、
jQueryで動くslick.jsが動作しない理由はflexboxが理由かも……?」 私の場合、Wordpress用の元から読み込まれていたJqueryをオフったり、$をすべてJqueryに置き換えてみてもダメだったので、上記の記述になりました。
   

Web Trends Lab.編集部

KOHIMOTO Inc.所属。トレンドやノウハウ中心にWebサイトを作るための知見を現場から発信していきます👀また、制作したWebサイトでの活用法や、最前線での施策を伺う企業へのインタビューも実施予定。