問題 × 解決策

slickで現在のスライドが何番目かを表示する

問題

「slick」で、現在のスライドが何番目かを表示させたい。

解決策

「slick」の実行時、再実行時、スライド切り替わり直後に「currentSlide」で現在のスライドが何番目かを取得して表示させる。

 

現在のスライドが何番目か

スライドショーでも、種類によっては現在のスライドの番号を表示する必要が出てきます。
今回はjQueryスライダープラグイン「slick」で、現在のスライドの番号を表示する方法をご紹介します。

DEMOはこちら

スライド01

スライド01です。

スライド02

スライド02です。

スライド03

スライド03です。

スライド04

スライド04です。

スライド05

スライド05です。

スライド06

スライド06です。

スライド07

スライド07です。

スライド08

スライド08です。

スライド09

スライド09です。

スライド10

スライド10です。

HTML

<div class="slick-box slidecnt">
	<div class="slide">
		<p class="titles">スライド01</p>
		<p class="text">スライド01です。</p>
	</div>
	<div class="slide">
		<p class="titles">スライド02</p>
		<p class="text">スライド02です。</p>
	</div>
	<div class="slide">
		<p class="titles">スライド03</p>
		<p class="text">スライド03です。</p>
	</div>
	<div class="slide">
		<p class="titles">スライド04</p>
		<p class="text">スライド04です。</p>
	</div>
	<div class="slide">
		<p class="titles">スライド05</p>
		<p class="text">スライド05です。</p>
	</div>
	<div class="slide">
		<p class="titles">スライド06</p>
		<p class="text">スライド06です。</p>
	</div>
	<div class="slide">
		<p class="titles">スライド07</p>
		<p class="text">スライド07です。</p>
	</div>
	<div class="slide">
		<p class="titles">スライド08</p>
		<p class="text">スライド08です。</p>
	</div>
	<div class="slide">
		<p class="titles">スライド09</p>
		<p class="text">スライド09です。</p>
	</div>
	<div class="slide">
		<p class="titles">スライド10</p>
		<p class="text">スライド10です。</p>
	</div>
</div>
<p class="slick-num">
	<span class="inner">
		<span class="nowcnt"></span> / <span class="allcnt"></span>
	</span>
</p>

CSS


.slick-box .slide{
	padding: 20px;
	background-color: #EAE6E5;
	border: 1px solid #ffffff;
	border-right: none;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}
.slick-box .titles{
	margin-bottom: 10px;
	font-size: 125%;
	font-weight: bold;
	letter-spacing: 1pt;
	text-align: center;
}
.slick-num{
	text-align: center;
}
.slick-num .inner{
	display: inline-block;
	padding: 10px 15px;
	color: #F15A24;
	font-weight: bold;
	background-color: #fef5f2;
}

現在のスライドが何番目かを取得できる「currentSlide」

「currentSlide」を使用することで、現在のスライドの番号を取得することができます。
「currentSlide」の数値は「0、1、2…」という形で0からのカウントとなるため、「+1」することで「何番目か」を明示することができるようになります。

currentSlide 現在のスライドの番号を返します。
「0、1、2…」という形で0からのカウントで表示されます。

スライドの番号を更新するタイミング

スライドの番号を更新するタイミングとして、「実行時」、「再実行時」、「スライドの切り替わった直後」の3点を対象にします。
「実行時」は「init」、「再実行時」は「reInit」、「スライドの切り替わった直後」は「afterChange」となります。

init スライドが初期化された時のイベント
reInit スライドが再初期化された時のイベント
afterChange スライドの切り替わった後のイベント

記述例

$('.slick-box').on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
	...
});

スライドの総数を取得できる「slideCount」

「slideCount」を使用することで、スライドの総数を取得することができます。

slideCount スライドの総数を返します。

スライド番号を表示する記述例

上記を元に、現在のスライドの番号を表示する記述例は以下になります。

$('.slick-box.slidecnt').on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
	var i = (currentSlide ? currentSlide : 0) + 1;
	$('.slick-num .nowcnt').text(i);
	$('.slick-num .allcnt').text(slick.slideCount);
});
$('.slick-box.slidecnt').slick({
	infinite: true,
	slidesToShow: 1,
	slidesToScroll: 1,
	adaptiveHeight: true,
	autoplay: true,
	autoplaySpeed: 5000,
	focusOnSelect: true,
	pauseOnFocus: false,
	pauseOnHover: false,
	pauseOnDotsHover: false,
	swipeToSlide: true,
	arrows: false
});

参照

【slickでスライド総数と現在何枚目が表示されているかをカウント表示する方法 | NxWorld】
https://www.nxworld.net/tips/jquery-plugin-slick-slide-counter.html

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

5 × one =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧