slickのスライダーが動かない6つの原因【WordPressのケースも解説】

著者:牧野健人

slickのスライダーが動かないときの原因6つとそれぞれの解決方法を解説します。

関連記事:【コピペOK】カルーセルスライダーをjQueryプラグインで実装する方法【カルーセルバナー】

slickのスライダーが動かない6つの原因

slickのスライダーが動かない場合、下記の6つの原因が考えられます。

以下でそれぞれ説明していきます。

必要なファイルを読み込めていない

slickを動かすためには、前提として下記の4つのファイルが読み込まれている必要があります。(いずれも、軽量化されたminバージョンでももちろんかまいません)

slickが動かないときは上記が欠けていないかをまずは確認しましょう。

これらのファイルの読み込み方には下記の2つの方法があります。

CDNとは(シンプルにまとめると)他所のサーバーからインターネットでデータを受け取れる仕組みのことです。

slickを動かすために必要な上述の4つのファイルはすべてCDNで読み込むことができます。「ファイルをダウンロードして、自分のサーバーにアップロードして、正しいパスを読み込んで…」とするよりもかなり簡単で楽です。

やり方は下記の記事で解説しているのでご参照ください。

slickをCDNで使う方法【お手軽】

jQuery本体をslickのjQueryよりも下に配置している

slickに限らずjQueryを使う場合には必ず当てはまりますが、jQueryのスクリプトよりも上でjQuery本体を読み込む必要があります

その順序を守らないと、個別のjQueryコードが動かないので、結果的にslickも動きません。

つまり下記のようにする必要があります。

<!-- まずはjQuery本体を読み込む -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>

<!-- その下でslickのスクリプトを読み込む -->
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
$(document).ready(function(){
  $('.your-class').slick({
    setting-name: setting-value
  });
});
</script>

WordPress同梱のjQueryと$を組み合わせて使っている

WordPressにはjQuery本体が同梱されています。

ただし、それを使う場合は個別のjQueryのスクリプトの先頭が $ のままだと機能しないという大きな注意点があります

slickのjQueryにも通常通り $ が使われているため、それらを jQuery に差し替えるか、スクリプト全体を jQuery(function ($) {}); で囲う必要があります。

しかし、それだと工程が増えてしまうので、WordPress同梱のjQueryを使わないのも手かと思います。

そのためには、まずhead区間の wp_head(); よりも前で下記のPHPを記述し、WordPress同梱のjQueryを外します。

<?php wp_deregister_script( 'jquery' ); ?> 

その上で、CDNを使うなりで新しくjQueryを読み込みます。

<!-- jQuery本体を読み込むCDN -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>

そうすることで、「スクリプトの $ が原因となりslickが動かない」という状況は解決されます。

scriptタグで囲まずにHTMLファイル内にjQueryを書いている

jQueryなどのJavaScriptをHTMLファイルの中に書く場合、scriptタグで囲む必要があります。

<script>
// slickのスクリプトをここに記述する
</script>

セレクタがjQueryとHTMLで対応していない

slickのスクリプトの中にはスライダーにしたいHTML要素のクラスを指定する箇所(セレクタ)があります。

セレクタがjQueryとHTMLで対応していないと、当然slickは動きません。

 <div class="your-class"> <!-- ←このクラスをスクリプトから指定する -->
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
 </div>
$(document).ready(function(){
   $('.your-class').slick({ // ←HTMLで使っているクラスを指定する
     setting-name: setting-value
   });
});

jQueryのバージョンが1.6以前になっている

slickを動かすにはjQueryのバージョンが1.7以降である必要があります。

牧野健人

著者牧野健人

株式会社リラクス 代表取締役。CRO・SEOを専門とし、デザイン・実装のスキルも活かしながら、クライアントの成果向上のための取組に尽力。
慶應義塾大学卒業後、行政機関を経て、デジタルマーケティングエージェンシーのアイレップにて運用型広告のクリエイティブプランニングに従事。2019年にリラクスを創業。

お問い合わせはフォームよりお願いいたします。

お気軽にご相談ください

Webサイトに関する課題をお持ちの方はお気軽にご連絡ください。
課題が曖昧な状態でのご相談でも大丈夫です。

改善点や競合との比較がわかる無料サイト診断 無料相談・お問い合わせ
改善点や競合との比較がわかる無料のサイト診断