【jQuery】slickでスライド枚数を数字で表示する方法(何枚目/総数)

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クックブック(オライリー)

関連記事

コメントを残す

*