slickでスライド枚数を数字で表示する方法
「何枚目/総数」という表示をするためのカスタマイズ方法です。
基本的な設置方法は以前の記事を参照ください。
$(function() {
$('.slide').on('init', function(event, slick) {
$(this).append('<div class="slick-counter"><span class="current"></span> / <span class="total"></span></div>');
$('.current').text(slick.currentSlide + 1);
$('.total').text(slick.slideCount);
})
.slick({
// ここにオプションを記述
autoplay: true,
autoplaySpeed: 4000,
infinite: true,
})
.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
$('.current').text(nextSlide + 1);
});
});
.slide
・・・ スライドさせる要素のclass名
.current
・・・ 現在何枚目のスライドか
.total
・・・ スライドの総数
参考:https://www.nxworld.net/jquery-plugin-slick-slide-counter.html
https://junpei-sugiyama.com/slick-slide-count/
【jQuery参考書】
■初級・入門向け
10日でおぼえるjQuery入門教室 第2版
■中級・実務向け
jQueryポケットリファレンス (POCKET REFERENCE)
■上級・開発向け
jQueryクックブック(オライリー)
■初級・入門向け
10日でおぼえるjQuery入門教室 第2版
■中級・実務向け
jQueryポケットリファレンス (POCKET REFERENCE)
■上級・開発向け
jQueryクックブック(オライリー)