【jQuery】slickで現在のスライド番号と総数を表示する方法

jQueryのプラグインでslickスライダーを使っている。
slickスライダーに現在のスライド番号と総数を表示したい。
本記事ではこのような悩みを解決。
実装方法について解説します。
実装サンプル
See the Pen
slick スライド数 総数 表示 by Kohei (@kouk05)
on CodePen.0
実装サンプルです。
スライダー下部に現在のスライド番号と総数が表示されてます。
実装手順は以下の通りです。
現在のスライド番号・総数を表示するjQueryコード
$(function() {
$(".slider")
.on("init", function(event, slick) {
$(this).append(
'<div class="slider-num"><span class="now-count"></span> / <span class="all-count"></span></div>'
);
$(".now-count").text(slick.currentSlide + 1);
$(".all-count").text(slick.slideCount);
})
.slick({
autoplay: true,
})
.on("beforeChange", function(event, slick, currentSlide, nextSlide) {
$(".now-count").text(nextSlide + 1);
});
});
現在のページ番号と総数を表示するjQueryコードサンプルです。
コードの内訳は以下の通りです。
以下関数を定義することで、slickが読み込まれた時の処理を実行できます。
.on(“init”, function(event, slick) {);
上記関数内で以下メソッドを使うと現在のスライド数と、総数を取得できます。
現在のスライド
slick.currentSlide
総数
slick.slideCount
スライドが移動する前という処理を以下関数で定義できます。
.on(“beforeChange”, function(event, slick, currentSlide, nextSlide) {}
上記関数内でnextSlide変数を使う事で次のスライド数を取得できます。
後はtextメソッドなどを使ってhtmlにスライド数・総数を代入すれば表示できます。
まとめ
以上の方法でslickスライダーから総数・現在のスライド数を実装できます。
解説を終わります。