スリックスライダー（slick.js）のdots、arrowsカスタマイズ法！

ホームページを作る際、ファーストビューがスライダーになっていることも多いですが、皆さんはどんなプラグインでスライダーを設置していますか？

本日はスリックスライダーのカスタマイズ方法をお伝えいたします。

arrowsのカスタマイズ方法はすごく簡単です。これはカスタマイズができるようにもともとオプションが用意されています。

slick.jsのオプションの箇所に下記のように記述すれば好きな画像をarrowsに設定できます。

$(function(){
  $("#slider").slick({
    prevArrow: '<img src="前への矢印画像のパス" class="slide-arrow prev-arrow">',
    nextArrow: '<img src="次への矢印画像のパス" class="slide-arrow next-arrow">'
  });
});

この時imgタグにクラスを付与すると、あとからcssでstylesheetを適用しやすくなるのでクラス名をつけておくほうが良いです。
上記の例では共通で「slide-arrow」、それぞれに「prev-arrow」「next-arrow」とクラス名を付けてます。

この時気をつけるのは「slick-prev」「slick-next」とクラス名を付けると、slick-theme.cssのstylesheetが適用されてしまうので、「slick-prev」「slick-next」以外でクラス名を付けたほうが良いです。

dotsのカスタマイズ方法

dotsのカスタマイズ方法もすごく簡単です。これもカスタマイズできるようにオプションが用意されています。
下記のように記述すれば好きな画像をdotsを囲んでいるulタグのクラス名を好きなクラス名に変更できます。

ulタグのもともとのクラス名は「slick-dots」なので、これ以外のクラス名をつけてあげましょう。

$(function(){
  $("#slider").slick({
    dotsClass: 'slide-dots'
  });
});

あとは.slide-dotsに関してcssを設定すればいいのですが、ここで1つ困ったことがあります。それは下記のようにdotsの要素内のbuttonタグの中に連番で数字が入っているのです。

（本当はrole属性やaria属性がいろいろ設定されているのですが、ここでは見やすくするために、あえて消してます。）

<ul class="slick-dots">
  <li class="slick-active"><button type="button">1</button></li>
  <li><button type="button">2</button></li>
  <li><button type="button">3</button></li>
</ul>

 
ですので、cssの書き方を少し工夫します。あくまで1例なので、できる方は好きなように書いてください。

buttonタグのtext-indentは-9999pxにして、中身の数字を画面外へ飛ばしてしまいます。
そしてpositionをrelativeにしておきます。

次にbuttonタグに擬似クラス:beforeを用いて、dotsに設定したい画像などを入れます。
before要素はtext-indentは0pxにして、positionをabsoluteにしてあげます。これでほとんど完成です。

あとはdotsのactive時の設定をしましょう。dotsのactive時はliタグにslick-activeのクラスが付きますので、そのときにはactive時の画像などを表示させるようにcssで調整しましょう。

arrowsやdotsのカスタマイズ方法について聞かれることが多いので、今回記事にしてみました。
ぜひみなさんのお役に立てればと思います。