slickのスライダーが動かない6つの原因【WordPressのケースも解説】
slickのスライダーが動かないときの原因6つとそれぞれの解決方法を解説します。
関連記事：【コピペOK】カルーセルスライダーをjQueryプラグインで実装する方法【カルーセルバナー】
目次
slickのスライダーが動かない6つの原因
slickのスライダーが動かない場合、下記の6つの原因が考えられます。
- 必要なファイルを読み込めていない
- jQuery本体をslickのjQueryよりも下に配置している
- 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で読み込むことができます。「ファイルをダウンロードして、自分のサーバーにアップロードして、正しいパスを読み込んで…」とするよりもかなり簡単で楽です。
やり方は下記の記事で解説しているのでご参照ください。
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以降である必要があります。
