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

はじめに

slick.jsは、レスポンシブに対応した柔軟なjQueryプラグインであり、Webサイトに魅力的なスライドショーやカルーセルを実装する上で非常に強力なツールです。

この記事では、slick.jsでスライドの総数と現在のスライド番号を動的に表示させる方法について、解説していきます。

なぜスライドの総数と現在のスライド番号を表示するのか？

スライドの総数と現在のスライド番号を表示することで、ユーザーは現在どのスライドを見ているのか、そして全体の中でどのくらいの進捗状況なのかを視覚的に把握することができます。

これは、特にコンテンツ量が多いスライドショーや、ユーザーが自由にスライドを切り替えることができるようなインタラクティブな要素がある場合に有効です。

実装方法

【HTML】

<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>

【JS】

$(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
		});
});

まとめ

slick スライダーでスライドの総数と現在のスライド番号を表示させることで、ユーザーエクスペリエンスを向上させることができます。

本記事はこちらの記事を参考にさせていただきました。
https://junpei-sugiyama.com/slick-slide-count/

IPPEI FUKUTA

名古屋の Web 制作会社で 9 年半働いた後フリーランスに。中小企業のWEBサイト制作実績 120 サイト以上。ディレクション、デザイン、コーディング、WordPress 構築まで手掛けます。Web制作に関わる情報やワーケーション日記などを執筆しています。