![](https://junpei-sugiyama.com/wp-content/uploads/2021/07/Question-1024x1024.png)
今回はそんな疑問にお答えします。
ドットインジケーターとはスライダーの下にあるドットの事で、スライドの枚数分あり、ドットをクリックするとそのスライドに移動します。
このデザインを変える方法を解説していきます。
slickの基本的な使い方と、slickを使うのに必要なjQueryの使い方については以下の記事を参照下さい。
-
レスポンシブ対応のスライダープラグイン slickの使い方
続きを見る
-
【初心者向け】jQueryとは?CDNを使った本体の読み込み方も分かりやすく解説
続きを見る
またslickには色々カスタマイズが出来るオプションがあるので、そちらも合わせて活用すると実装出来るスライダーの幅が広がります。
-
【slick】カスタマイズ用オプションまとめ一覧
続きを見る
slickのドットインジケーターをカスタマイズする方法
まずはデフォルトの状態を見てみましょう。
See the Pen
slickドットインジケーター(デフォルト) by junpei (@junpei-sugiyama)
on CodePen.
jQueryのコードを簡単に解説をします。
$(function () {
$(".slider").slick({
arrows: false,
autoplay: true,
adaptiveHeight: true,
dots: true,
});
});
arrows | 前へ次への矢印(初期値:true) |
autoplay | 自動再生(初期値:false) |
adaptiveHeight | スライドの高さの自動調整(初期値:false) |
dots | ドットインジケーターの表示(初期値:false) |
今回は前へ次への矢印は不要なので非表示にしています。
あとドットインジケーターはデフォルトでは非表示なので、これをtrueにして表示させています。
スライドが6枚あるので、スライドの下に6つドットがありますね。
ドットは灰色ですが、表示されているスライドの位置にあるドットは黒になっています。
これを変えていくので、
- 表示されているスライドのドット
- 表示されていないスライドのドット
この2種類のドットを変更していくので、2種類の画像を用意して下さい。
ドットのclassを変更する(slickオプション)
ドットインジケーターはulタグとliタグで作られており、ulタグにはデフォルトで slick-dots というclass名が付いています。
まずはこのclass名をオプションを使って変更します。
$(function () {
$(".slider").slick({
arrows: false,
autoplay: true,
adaptiveHeight: true,
dots: true,
dotsClass: "slide-dots" //ここでclass名を変更する(デフォルトはslick-dots)
});
});
これでデフォルトのスタイルは解除されました。
あとは自由にカスタマイズしていくだけです。
まずは完成形を見てみましょう。
See the Pen
slickドットインジケーター(カスタマイズ) by junpei (@junpei-sugiyama)
on CodePen.
CSSはこちらです。
.slider {
margin: 0 auto;
max-width: 500px;
width: 80%;
}
.slider-img img {
height: auto;
width: 100%;
}
.slide-dots {
margin: 0;
padding: 0;
text-align: center;
}
.slide-dots li {
display: inline-block;
margin: 0 10px;
}
.slide-dots li button {
position: relative;
text-indent: -9999px;
}
.slide-dots li button::before {
background-image: url(表示されてない用の画像のパス);
background-repeat: no-repeat;
background-size: contain;
content: "";
cursor: pointer;
height: 13.5px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 24px;
width: 13.5px;
}
.slide-dots li.slick-active button::before {
background-image: url(表示されてる用の画像のパス);
}
button {
background: none;
border: none;
outline: none;
padding: 0 7px;
}
marginやpadding、widthやheightなどは都度調整して頂ければとお持ちます。
あとはスライドが表示されてる用の画像パスと、表示されてない用の画像パスを入れればOKです。
まとめ
今回はslickでドットインジケーターをカスタマイズする方法を解説しました。
デザインを忠実に再現する場合に必要になるので、実装できるようにしておきましょう。
以上になります。
関連記事slick記事一覧
関連記事Swiper記事一覧
関連記事Splide記事一覧
![](https://junpei-sugiyama.com/wp-content/uploads/2021/07/Joy-1024x1024.png)