スライダーを実装したい時にとっても役立つ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が読み込めていないなどの原因が出てきますが、それでも解決しない場合はコードを見直してみてくだされ。

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

→slickでドットの表示が変になる

それでは！