フリーランスの忘備録

Dark Mode

searchKeywords

sellBlog Taglist

boltおすすめ記事

slick.jsのdots、arrowsのカスタマイズ方法

slick.jsのdots、arrowsのカスタマイズ方法

以前にslick.jsに関することを2つ書きましたが、今回はもっと絞って「arrows」と「dots」のカスタマイズ方法について紹介します。
以前のslick.jsに関する記事は下記の2つです。

追加で「slick.jsでサムネイル付きスライダーを作成する」も書きました。サムネイルを固定した場合のスライダーのサンプルも紹介しています。

目次

  1. arrowsのカスタマイズ方法
  2. 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」以外でクラス名を付けたほうが良いです。

デモを作成してみたので、参考にしてみてください。
デモでは画像を入れるのではなくbuttonタグを入れて、あとはcssで調整しています。

See the Pen slick-arrows by blanks (@blanks-site) on CodePen.

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で調整しましょう。今回はactive時には「★」にしています。

See the Pen slick-dots by blanks (@blanks-site) on CodePen.

あらためて書いてみると、簡単そうで意外に難しいですね。arrowsやdotsのカスタマイズ方法について聞かれることが多いので、今回記事にしてみました。
ぜひみなさんのお役に立てればと思います。

arrow_circle_up