Slickスライダーで現在のスライド番号と総数を表示する方法

公開日: 2024.08.26
最終更新日: 2026.07.17

スライダーに「3 / 8」のように現在のスライド番号と総数を表示すると、ユーザーは今どこを見ているか、あと何枚あるかをひと目で把握できます。slickなら、この番号表示を専用の仕組みなしで実装できます。

結論から言うと、slickのinitイベントで総数（slideCount）と現在番号（currentSlide）を取得して表示し、beforeChangeイベントでスライドが切り替わるたびに番号を更新するのがポイントです。この記事では、番号表示のメリットから実装コード、そして押さえておきたいコードのポイントまでを解説します。

1 スライド番号を表示するメリット
2 実装方法
3 コードのポイント
4 表示位置を整えるCSS
5 まとめ

スライド番号を表示するメリット

現在のスライド番号と総数を見せることで、ユーザーは全体のどのあたりを見ているのか、進捗をつかめます。とりわけ、スライド枚数が多いギャラリーや、ユーザーが自分でスライドを送れるインタラクティブなカルーセルでは、「あと何枚あるか」が分かることで安心して操作できます。ドットインジケーターだけでは枚数が多いと把握しづらい場面でも、数字なら一目瞭然です。

実装方法

まずはスライダーのHTMLです。番号表示用の要素は、あとからJavaScriptで追加するため、ここでは用意する必要はありません。

<div class="slick">
    <div class="slick__img">
        <img src="画像パス" alt="" />
    </div>
    <div class="slick__img">
        <img src="画像パス" alt="" />
    </div>
    <div class="slick__img">
        <img src="画像パス" alt="" />
    </div>
</div>

続いてJavaScriptです。initで番号表示用の要素を追加し、beforeChangeで更新します。

$(function () {
	$(".slick")
		.on("init", function (event, slick) {
			$(this).append('<div class="slick-num"><span class="now-count"></span><span class="slash"> / </span><span class="all-count"></span></div>');
			$(".now-count").text(slick.currentSlide + 1); // 現在のスライド番号(+1が無いと0からスタートしてしまう)
			$(".all-count").text(slick.slideCount); // スライドの総数
		})
		.slick({
			arrows: false,
			autoplay: true,
			speed: 300,
			infinite: true,
			pauseOnFocus: false,
			pauseOnHover: false,
			pauseOnDotsHover: false,
		})
		.on("beforeChange", function (event, slick, currentSlide, nextSlide) {
			$(".now-count").text(nextSlide + 1); // 現在のスライド番号の次のスライドになったら番号を+1
		});
});

コードのポイント

実装の勘どころは、イベントを呼ぶ順番と番号の数え方にあります。

まず注意したいのは、initイベントを.slick()の呼び出しより前に書くことです。slickは初期化された瞬間にinitを発火するため、あとに書くとイベントの登録が間に合わず動きません。この順序が守られているのが、このコードの重要な点です。

次に、initの中で番号表示用のHTML（.slick-num）をスライダーに追加し、そこへ現在番号と総数を流し込んでいます。slick.slideCountが総数、slick.currentSlideが現在のスライド番号です。

ここでポイントになるのが+ 1です。currentSlideやnextSlideは0から数え始めるため、そのまま表示すると1枚目が「0」になってしまいます。人間が読む番号は1始まりなので、+ 1して補正しています。

最後に、beforeChangeでスライドが切り替わる直前のnextSlideを拾い、表示番号を更新します。afterChangeではなくbeforeChangeを使うことで、スライドの動き出しと同時に番号が変わり、表示のズレを感じさせません。

1点注意しておきたいのが、同じページに複数のスライダーを置く場合です。上記のコードは.now-countや.all-countをページ全体から探すため、スライダーが複数あると番号の表示先が混ざってしまいます。その場合は、$(this).find(".now-count")のように各スライダー内の要素だけを対象にすれば、それぞれ独立して番号を表示できます。

表示位置を整えるCSS

JavaScriptで追加した.slick-numは、そのままだと文字が流し込まれただけの状態です。スライダーの右下などに重ねて表示したい場合は、CSSで位置を整えます。

.slick {
    position: relative; /* 番号の基準にする */
}

.slick-num {
    position: absolute;
    right: 20px;
    bottom: 20px;
    color: #fff;
    font-size: 1.4rem;
    letter-spacing: 0.05em;
}

ポイントは、番号を重ねる基準としてスライダー本体にposition: relative;を指定しておくことです。これを忘れると、.slick-numのposition: absolute;がページ全体を基準に配置されてしまい、意図した位置に収まりません。あとはrightやbottomの値、色や文字サイズをデザインに合わせて調整すれば完成です。