【slick】サムネイルが連動しない・動かない時の理由と解決方法
こんにちは、NNCの中里です。
先日立て続けに「slickでスライドを作っているが、サムネイルが動かないので見てほしい」と相談を受けたので、本日はタイトルの通りslickのサムネイルが連動しない・動かない時の理由と解決方法を紹介します！
目次
slickでサムネイルがスライドと連動しない原因と解決策
プラグインが動作しているか確認
slickの命令を出した要素に slick-initialized や slick-slider といったclassが付与されていれば正しく動作している状態、classが付与されていなければ正しく動作できていない状態になります。
まずはclassの有無を確認してみてください。
プラグインが動作していない場合
以下のファイルへリンクが貼れているか確認をしましょう。jQueryライブラリ / slick.js / slick.css / 必要な場合はslick-theme.css（デフォルトのスタイルを使用する場合）
ファイル名やパスなどが誤っていないかも確認してみてください！
プラグイン自体は動作している場合
メインとなるスライド、サムネイルとなるスライドにclassが付与されている場合、以下の原因が考えられます。
【オプションでasNavFor設定されてない / 誤っている】
メインとなるスライドとサムネイル用のスライドを連動するにはasNavForというオプションの設定が必要になります。
$(".slick_main").slick({
asNavFor: '.slick_thumb'
});
$(".slick_thumb").slick({
asNavFor: '.slick_main'
});上の記述例で.slick_main（メインスライド）と.slick_thumb（サムネイル）が連動します。設定がされているか、それぞれのclassなどに誤りがないか確認しましょう。
【重要！スライドの枚数とサムネイルの表示枚数が同じになっている】
今回いただいた相談の原因は、全てこれが原因でした・・・！
以下のようにスライドが５枚という状態で、サムネイルの表示枚数を５枚にするとサムネイルは動きません。
<ul class="slick_main">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
<ul class="slick_thumb">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>$(".slick_main").slick({
asNavFor: '.slick_thumb'
});
$(".slick_thumb").slick({
slidesToShow: 5,
asNavFor: '.slick_main'
});サムネイルの表示枚数をスライドの枚数より少なくすることで連動して動作します！
スライドが５枚の場合slidesToShowは4以下 、スライドが4枚の場合slidesToShowは3以下としてください。
スライドは文字通り「スライドさせる」ための機能ですので、サムネイルが最初から全て表示されてしまうとスライドしません。
【応用】枚数が異なる複数のスライドに対応させるコード
今回いただいたご相談で「ページ毎にスライドの枚数が変わるので、スライドの枚数に応じてサムネイルの枚数を変動させるようにしてほしい」とご要望がありました。
そのような場合は以下のコードで対応が行えます。
$(function () {
var slideNum = $(".slick_main li").length;
var thumbNum = slideNum - 1;
$(".slick_main").slick({
asNavFor: '.slick_thumb'
});
$(".slick_thumb").slick({
slidesToShow: thumbNum,
asNavFor: '.slick_main'
});
})ポイント
var slideNum = $(".slick_main li").length;メインのスライドの数を取得し、変数slideNum（サムネイルの枚数を指定する変数）に代入します
var thumbNum = slideNum - 1;変数thumbNumにslideNumから1引いた値を代入します。
slidesToShow: thumbNum, slidesToShowの値を変数thumbNumに設定します。
これによってメインのスライドから1を引いた値が、サムネイルの表示枚数となります。
まとめ
今回はslickのサムネイルが動作しない・連動しない際の原因と解決策を紹介しました！
いくつかの原因があるので、それに合わせて解決をすることになります。
また応用で紹介したコードは汎用高いものとなっているので、よろしければ使ってみてください。
