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

2023/10/05 著者:牧野健人

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

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

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

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

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

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

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

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

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

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

slick-theme.css
slick.css
jQuery本体
slick.js

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

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

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

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

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

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

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

jQuery本体をslickのスクリプトよりも後で読み込んでいる

slickに限らず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を使わないのも手かと思います。

そのためには、functions.phpに下記のようなコードを記述します。

function replace_wp_jquery_with_cdn() {
    // 1. WordPressの同梱のjQueryを外す
    wp_deregister_script('jquery');

    // 2. CDN経由でjQueryを読み込む（ヘッダー内で。フッター内で読み込みたい場合は第五引数をtrueにする。）
    wp_enqueue_script('jquery', 'https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js', array(), '3.6.1', false);
}
add_action('wp_enqueue_scripts', 'replace_wp_jquery_with_cdn');

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

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

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

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

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

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

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

 <div class="your-class"> <!-- ←このclassをスクリプトから指定する -->
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
 </div>

$(document).ready(function(){
   $('.your-class').slick({ // ←HTMLで使っているclassを指定する
     setting-name: setting-value
   });
});

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

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