【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スライダーから総数・現在のスライド数を実装できます。

解説を終わります。

関連記事

JavaScript プログラミング

【簡単】slickを使い左右チラ見せ中央固定のカルーセルスライダーを実装する方法

2022.01.16
1024
JavaScript プログラミング

【簡単】JavaScriptを使って任意の文字列を置換する方法

2022.04.05
50
JavaScript プログラミング

htmlのselectボックスを使って選択したoptionにリンクさせる方法【jQuery】

2022.04.16
43
JavaScript プログラミング

【日本語対応】Datepickerを使って予約フォームにカレンダー式日付選択を入れる方法【jQuery】

2022.02.11
369