【Swiper】autoplayで切り替わるまでの秒数をカウントダウン表示する

こんにちは、Ryohei（@ityryohei）です！

本記事では、Swiperのautoplay使用時に、スライドが切り替わるまでの秒数をカウントダウンの形式で表示する方法をご紹介しています。

Swiperでスライドが自動で切り替わるまでの秒数をカウントダウンで表示したいんだけど、良い方法ないかな？

上記の疑問にお答えします。

では、解説していきます。

本記事で作成するもの

本記事ではSwiperを使用してautuplayでスライドが切り替わるまでの秒数をカウントダウン形式で表示するスライダーを作成します。デモを用意しておりますので、完成イメージをご確認ください。

See the Pen Autoplay Countdown｜Swiper by ryohei (@intotheprogram) on CodePen.

Swiperではautoplayをtrueにして、effectにfadeを指定しています。スライドの左下に表示されている要素がスライドが切り替わるまでの秒数になります。0秒を表示するのは違和感があったので、残り1秒までの表示にしています。

完成イメージをご確認いただいたところで、実際に作り方を見ていきましょう。

Swiperを読み込む

本記事ではSwiperを使用しますので、Swiperの使用に必須の各種ファイルを読み込みます。公式サイトにてCDNが提供されていますので、そちらを使わせていただきます。

//CSS
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

//JS
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

以上でSwiperに必要なファイルの読み込みは完了です。

SwiperのHTMLレイアウトを作成する

続いてSwiperでHTMLのレイアウトを作成します。公式サイトに記載のレイアウトを参考にします。本記事で作成するスライダーは冒頭でご紹介したデモのように画像を使用します。そのため各スライドに画像を持たせていますが、実装される場合は環境に合わせて変更してご利用ください。

<div class="swiper-container">
    <div class="swiper-countdown-text"></div>
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="sample001.jpg" alt="">
        </div>
        <div class="swiper-slide">
            <img src="sample002.jpg" alt="">
        </div>
        <div class="swiper-slide">
            <img src="sample003.jpg" alt="">
        </div>
    </div>
</div>

SwiperのCSSを調整する

Swiperのレイアウトが作成できましたら、簡単にCSSでスタイルを調整します。

今回はコンテナのwidht／heightを調整して、autoplayでスライドが切り替わるまでの秒数を表示する要素のスタイルを定義します。CSSは参考程度にとどめていただければと思います。

.swiper-container {
    width: 540px;
    height: 345px;
    margin: 20px auto;
}

.swiper-countdown-text {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 1.4rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .7);
}

Swiperを初期化する

Swiperを初期化してスライドが動くようにします。カウントダウンとイベントも記述して完成です。スクリプトの処理内容については、コメントを参考にしていただければ幸いです。

const swiper = new Swiper('.swiper-container', {
    effect: 'fade',
    slidesPerView: 1,
    init: false,
    autoplay: {
        delay: 5000,
    }
})

//autoplayのdelayを取得して、秒単位にする
const delayTime = swiper.params.autoplay.delay / 1000
//カウントダウンテキストを表示する要素を取得する
const countdownText = document.querySelector('.swiper-countdown-text')
//カウントダウンの処理
const countdown = function(){

    let count = delayTime
    let id = setInterval(function(){

        count -= 1
        countdownText.textContent = count

        if(count === 0){
            countdownText.textContent = delayTime
            clearInterval(id)
        }
  }, 1000);
}

//初回読み込み時に秒をセット
countdownText.textContent = delayTime
//初期化直後に実行する
swiper.on('afterInit', countdown)
//スライド遷移後に実行する
swiper.on('transitionEnd', countdown)
//Swiperを初期化
swiper.init();

これでautoplayでスライドが切り替わるまでの秒数をカウントダウンで表示する処理の完成です。

最後に

本記事の内容は、業務で使用したわけでもなく、プライベートで運用しているサイト等で使用したわけでもなく、単純に興味だけで作成したものになります。どんだけSwiperが好きなんだって話ですが、何かに熱中しているときって時間を忘れるくらい楽しいですよね。ドキュメントと睨めっこをしている時間がたまらなく好き！　そんな変態さんが私意外にもたくさんいるはず……

とこんな感じでSwiperを触りまくっているので、自然とSwiper関連の投稿も充実してきました。カテゴリーで分けて実装例をご紹介するまとめページを作るのもありかなと思っていたり。そのうち時間を確保して作ろうかなと思います。お楽しみに！

以上、Swiperで、autoplayで切り替わるまでの秒数をカウントダウン表示する方法のご紹介でした！