• slick

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

解説を終わります。