【CSSがわかればできる！】slickのナビゲーションをドットから数字に変える

CSS

2024年02月20日2024年04月19日

スライダーの定番プラグイン『slick』。
その中でも今回は、ナビゲーションについてのお話です。
（slickの基本的な使い方は、当記事では割愛します。）

dotsやサムネイルなど、slickならお好みのナビゲーションもカンタンに表示させることができますが
番号つきのナビゲーションのやり方は検索してもあまり出てこなかったので、ここで紹介します。
jQueryを書き足すことなくカンタンにできますよ！

実装

ということで、早速コードを見ていきましょう。

最低限必要なコードだけで構成するとこんな感じ。
手順としては、以下の通りです。

（slickの読み込み方はここでは割愛します。）
スライダーの下に表示された.slick-dotsの中身.slick-dots li buttonを見てみると、
デフォルトで数字が入っているのがわかります。

デフォルト状態で入っているこの数字を生かして
CSSで表示させよう！というのが今回の主旨です。

slick-theme.cssで、数字が非表示になるよう下記のスタイルが当たっています。

color: transparent;
font-size: 0px;

1 2	color: transparent; font-size: 0px;

これを、数字が見えるようスタイルを上書きします。

color: #ccc;
font-size: 1.25rem;

1 2	color: #ccc; font-size: 1.25rem;

dotsで表示させたナビゲーションのドットは
同じくslick-theme.cssで擬似要素でついてるので、content: none; で消します。

.slick-dots li button::before {
  content: none;
}

.slick-dots li button::before {

content: none;

}

上のcodepenでは、現在表示されている画像の番号がわかるよう.slick-activeのスタイルも追加しました。

.slick-dots li.slick-active button {
  color: #000;
}

.slick-dots li.slick-active button {

color: #000;

}

以上、slickのナビゲーションをドットから数字に変える方法でした。
これならjsを特別いじらなくても、デフォルトの機能＋CSSだけで手軽に再現できます。
お試しあれ〜