【slick.js】slick ドットが数字になってしまう問題

やまだ

こんにちは、山田です。

スライダーを実装したい時にとっても役立つjQueryベースのプラグイン「slick.js」。

割と簡単に実装できるのでよく使っているんですが、とある問題が発生しました。

やまだ

な、なぜかドットが数字になってしまう…

スライド下にあるドットインジケーターがなぜか数字になってしまうという現象が発生してしまいました。

元をたどれば凡ミスだったわけですが、今後の戒めのためにもメモを残しておきます。

dotsClassに独自classを指定していた

結論から言いますと、以下が原因でした。

$(function () {
    $(".slider").slick({
        dots: true,         
        dotsClass: "hogehoge" // ←←こいつが犯人(´・ω・｀)！     
    }); 
});

slick.jsには様々なオプションがあり、それを指定する事で機能面やデザイン面でカスタマイズする事ができます。

その中の一つに「dotsClass」というものがありまして。

デフォルトでは”slick-dots”というclass名がついていて、dotsが有効になっていれば見た目的にはドットインジケーターがこんな感じで表示されます。

このドットを独自にカスタマイズしたい時に「dotsClass」に独自のclass名を指定すれば、デフォルトのスタイルが解除されて独自のカスタマイズが出来るというわけです。

そう、デフォルトのスタイルが解除されるんです。

独自のclass名をつけるのであれば、独自のCSSも用意しなくてはいけません。

やまだ

うん、してなかったよね。

というか、書くのがめんどくてネットで拾ったコードをコピペしてたよね。

見事にわけのわからんclass名を指定してて、デフォルトのスタイルが解除されて数字になってしまっていた…というわけでした。

おさらいになりますが、こんな感じで書けば独自カスタマイズが可能になります。

$(function () {
    $(".slider").slick({
        dots: true, // ドットインジケーターを有効にする
        dotsClass: "任意のクラス名" // ここでclass名を変更
    });
});

デフォルトの丸っこいドットで良ければ、「dots: true」だけ指定しときましょう。

確認もせずに、コピペしたコードでミスるってもう初歩的すぎて…

「slick ドット数字になる」で調べてみると、jQueryやslick-theme.cssが読み込めていないなどの原因が出てきますが、それでも解決しない場合はコードを見直してみてくだされ。

下記ページが大変参考になりました。

それでは！