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

slickが動かない

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

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

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

  • 必要なファイルを読み込めていない
  • jQuery本体をslickのjQueryよりも下に配置している
  • WordPress同梱のjQueryと$を組み合わせて使っている
  • scriptタグで囲まずにHTMLファイル内にjQueryを書いている
  • セレクタがjQueryとHTMLで対応していない
  • jQueryのバージョンが1.6以前になっている

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

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

slick.jsを動かすためには、前提として下記の4つのファイルが読み込まれている必要があります

  • slick-theme.css
  • slick.css
  • jQuery本体
  • slick.min.js か slick.js

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

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

  • CDNで読み込む
  • 自分のサーバーにアップロードしたものを読み込む

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

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

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

slickのファイルをCDNで読み込む slickをCDNで使う方法【お手軽】

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<script type="text/javascript">
// 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>
<script type="text/javascript">
   $(document).ready(function(){
     $('.your-class').slick({ // ←HTMLで使っているクラスを指定する
       setting-name: setting-value
     });
   });
</script>

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

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

この記事の執筆者

牧野健人

牧野健人

株式会社リラクス 代表取締役。マーケティング領域におけるクリエイティブ改善を専門としながら、アクセス解析やSEOの知見、ならびにデザイン・コーディングのスキルを活かしクライアントの成果向上のための取り組みに尽力しています。