【jQuery】slickスライダーのページャーをメーターにカスタマイズする方法

RELEASE / 2022.5.15 UPDATE / 2022.07.13

WEBサイトでスライドショーを作成する際、よく使用するスライダープラグインのslick。
デフォルトのオプション機能にページナビを作成する機能があります。
しかし、デフォルト機能の場合、画像の枚数分、ページナビが表示されるのみで、あと何秒で次の画像に切り替わるのか分かりません。

つい最近実装をした切り替わりメーター機能を追加したslickページナビの実装方法をご紹介します。

この記事の目次を表示

1 slickスライダーでページナビを表示する
2 ページナビのスタイルを調整する
- 2.1 ページナビレイアウトカスタマイズ
- 2.2 メーターを作る
3 jsで処理を追加する

slickスライダーでページナビを表示する

まずは以下のようにhtmlとCSSを用意します。

<div class="slick">
 <div class="item"><img src="./images.jpg"></div>
 <div class="item"><img src="./images.jpg"></div>
 <div class="item"><img src="./images.jpg"></div>
</div>

.slick{
  width: 85%;
  margin: 0 auto;
}
.slick .item{
  width: 100%;
}
.slick .item img{
  width: 100%;
  height: auto;
}

続いてjQueryを以下のように記述します。
class="slick"をslickスライダーにします。

$(function(){
 $slide = $(".slick");
 $slide.slick({
  dots: true,
  autoplay: true,
  speed: 1000,
  autoplaySpeed: 4000,
 });
});

dots: true,
このように記述することでslickのオプション機能でページナビを有効にします。
その他いくつかのオプション機能を有効にします。

項目	デフォルト値	仕様
autoplay	false	trueの場合、自動再生する
speed	300	フェードのスピード
autoplaySpeed	3000	自動再生時のスライド切り替えのスピード

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

ページナビのスタイルを調整する

ページナビレイアウトカスタマイズ

slickの設置が完了したら、slickのデフォルトのページナビのレイアウトを調整します。
以下のCSSでレイアウトを調整します。

/*----- ページナビレイアウトカスタマイズ */
.slick-dots li {
  width: 35px;
  height: 2px;
  margin: 0 3px;
  background: #ccc;
}
.slick-dots li button {
  width: auto;
  height: auto;
  padding: 0;
}
.slick-dots li button::before {
  display: none;
}
.slick-dots li.slick-active {
  position: relative;
}

メーターを作る

メーター部分もCSSで作成します。
メーターの動きはCSSアニメーションで再現します。

.slick-dots li.slick-active::before {
  width: 0;
  height: 100%;
  left: 0;
  top: 0;
  background: #333;
  position: absolute;
  display: block;
  content: "";
  -webkit-animation: 5s linear 0s infinite alternate slide_meter;
          animation: 5s linear 0s infinite alternate slide_meter;
}

/*----- 最初の1回目処理用 */
.slick-dots li.slick-active.first::before {
  -webkit-animation: 4s linear 0s infinite alternate slide_meter;
          animation: 4s linear 0s infinite alternate slide_meter;
}

/*----- アニメーション */
@-webkit-keyframes slide_meter {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes slide_meter {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

slickのページナビは現在表示中のliタグにclass="slick-active"が付与されます。
.slick-activeのliのafter要素にスライダーの切り替わる秒数に合わせて横幅を100%になるアニメーションを設定します。

ここでポイントとなるのが、

/*----- 最初の1回目処理用 */
.slick-dots li.slick-active.first::before {
  -webkit-animation: 4s linear 0s infinite alternate slide_meter;
          animation: 4s linear 0s infinite alternate slide_meter;
}

1回目の処理だけ別に指定するということ。

スライダーは
「止まっている時間」+「2枚の画像が切り替わる時間」
この合計時間が1セットの時間となります。

1番最初の画像の時は「 2枚の画像が切り替わる時間」がありません。
なのでその他と同じ秒数でCSSアニメーションを設定するとメーターがちょうど貯まるタイミングで切り替わりが始まりません。

そのため1番最初の画像用に秒数を調整したアニメーションを別に用意します。

jsで処理を追加する

$(window).load(function(){
    $(".slick-dots li").eq(0).addClass("first");
});

ページの読み込みが完了したタイミングでページナビの1個目にclass="first"を付与します。

これで1回目の処理だけ専用の時間を指定することが可能です。
ただ、1回目の画像切り替わりが終わった後にclass="first"を消さないと、毎回1枚目の切り替わりの時だけ、若干タイミングの異なる速さになってしまいます。
最後の画像→最初の画像の時は
「止まっている時間」+「2枚の画像が切り替わる時間」
となるのでclass="first"が付与されたままだとおかしくなってしまいます。

$slide.on('afterChange', function (slick, currentSlide) {
    if($(".slick-dots li").eq(0).hasClass("first"))
        {
            $(".slick-dots li").eq(0).removeClass("first");
        }
    });
}

slickスライダーのcallback関数を使用し、スライダーが切り替わった後、 class="first" を取り除く処理を追加します。

これでslickスライダーでメーター付きページナビが完成します。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

※codepen環境下の影響で1回目のタイミングがずれてしまっています。
実際にサイトに埋め込む際はうまくいくと思います。