・slickでスライド枚数を表示する方法は？
こんな疑問にお答えします。
デザインカンプによっては、スライダー部分に枚数を表示する必要がありますよね。
現在のスライド番号と、合計のスライド枚数。
これ実は簡単に表示実装することができちゃいます。
すぐにできるよ！
ということで、この記事では「slickでスライド枚数を表示する方法」について解説していきます！
slickでスライド枚数を表示する方法
【jQuery】slickの使い方｜初心者向けに解説【レスポンシブ対応】 目次
【簡単】slickでスライド枚数を表示する方法【現在・総合計数】
そんなスライド枚数を表示したサンプルがこちら↓
See the Pen slick枚数表示➀ by jito-coder (@jito-coder) on CodePen.
実装として重要な点がこちら↓
- jQueryにてスライド数表示用のコードを記述
- 生成されるHTMLタグを理解
- 生成されたHTMLに対してCSSを当てる
順に見ていきましょう。
まずスライド数を表示させるためのコードを、jQueryを用いて記述します。
コードがこちら↓
$(function () {
$(".test-slick")
.on("init", function (event, slick) {
$(this).append('<div class="slick-num"><span class="now-count"></span> / <span class="all-count"></span></div>');
$(".now-count").text(slick.currentSlide + 1);
$(".all-count").text(slick.slideCount);
})
.slick({
arrow: true,
autoplay: true,
})
.on("beforeChange", function (event, slick, currentSlide, nextSlide) {
$(".now-count").text(nextSlide + 1);
});
}); 難しそうですが細かく分ければ理解可能です。
まず下記部分でHTMLタグを生成しています。
// slickを当てるクラスを指定
$(".test-slick")
.on("init", function (event, slick) {
// slickの子要素にHTMLタグを生成
$(this).append('<div class="slick-num"><span class="now-count"></span> / <span class="all-count"></span></div>');
// 表示してるスライド番号を「now-count」部分にテキスト追加
// 初期値0から始まるため+ 1をしている
$(".now-count").text(slick.currentSlide + 1);
// スライドの総合計枚数を「all-count」部分にテキスト追加
$(".all-count").text(slick.slideCount);
})そして生成されたHTMLタグに対して「現在のスライド枚数」と「総合計スライド枚数」のテキストを表示するようにしています。
続いて通常通りのslickのコードを記述します。
.slick({
arrow: true,
autoplay: true,
})最後が下記。
.on("beforeChange", function (event, slick, currentSlide, nextSlide) {
$(".now-count").text(nextSlide + 1);
});これでスライド移動前に、次のスライド番号に＋1追加します。
つまり2枚目のスライドだったら、「2」と表示されるわけですね。
先述したようにjQueryにてHTMLタグが生成されます。
そんな生成されるタグが下記の6～8行目↓
<div class="test-slick">
<div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="" width="500" height="233"></div>
<div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="" width="500" height="233"></div>
<div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/3.png" alt="" width="500" height="233"></div>
<div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/4.png" alt="" width="500" height="233"></div>
<div class="slick-num">
<span class="now-count">1</span> / <span class="all-count">4</span>
</div>
</div>「now-count」のspanタグ部分に現在のスライド枚数が、「all-count」のspanタグ部分に総合計枚数が表示されるようになります。
後は生成されたHTMLに対してCSSを当てて装飾すれば、デザインカンプ通りに調整できますよね。
やり方としては通常通り。
今回は例として下記みたいに調整しました。
.slick-num {
font-size: 20px;
font-weight: 700;
text-align: center;
padding: 10px;
margin-inline: 5px;
color: #fff;
background-color: #000066;
}とはいえこれはデザインによって変えましょう。
【簡単】slickでスライド枚数を表示する方法【文字を変えてみた！】
最後に「何枚目中の何枚目」みたいな文字を追加したサンプルを紹介しますね。
それがこちら↓
See the Pen slick枚数表示➁ by jito-coder (@jito-coder) on CodePen.
$(function () {
$(".test-slick")
.on("init", function (event, slick) {
$(this).append('<div class="slick-num"><span class="now-count"></span>枚目 / <span class="all-count"></span>枚中</div>');
$(".now-count").text(slick.currentSlide + 1);
$(".all-count").text(slick.slideCount);
})
.slick({
arrow: true,
autoplay: true,
})
.on("beforeChange", function (event, slick, currentSlide, nextSlide) {
$(".now-count").text(nextSlide + 1);
});
});
4行目の追加タグ部分に、文字を追加すれば実装できます！
$(this).append('<div class="slick-num"><span class="now-count"></span>枚目 / <span class="all-count"></span>枚中</div>');【簡単】slickでスライド枚数を表示する方法【現在・総合計数】：まとめ
- jQueryにてスライド数表示用のコードを記述
- 生成されるHTMLタグを理解
- 生成されたHTMLに対してCSSを当てる
スライド枚数を表示したいときは試してみてね！
【解説】slickのオプション一覧【カスタマイズまとめ】 
【最新】slickのスライダー実装サンプル25選【コピペOK】
