最終更新日：2023.01.06

背景画像をフェードで切り替えるスライダーSwiper.jsの使い方（ページネーションあり）

背景画像をフェードで切り替えて、さらにページネーションも使えるスライダーを紹介します。jQueryを使わず単体で動作します。

デモページ

前提条件は以下

jQueryは使わない
ページネーションとナビゲーションを表示させる（色の変更も可能）
背景画像をフェードで切り替え、ループさせる

説明環境は以下

macOS Monterey 12.5.1
Visual Studio Code v1.73.1

※2023.01.06追記
Swiperのバージョンを８系に変更しました。

この記事の目次

背景画像をフェードで切り替えるSwiper.jsの使い方

背景画像をフェードで切り替えるスライダーは他にもありますが、Swiperはページネーションの有る無しを自由に設定できるのがポイントです。

Swiperに必要なファイルを読み込む

今回はCDNからSwiperに必要なJavaScriptとCSSを読み込みます。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

HTMLに書くこと

今回は左右のページネーションと、丸型のナビゲーションボタンを表示させる設定にしています。

<div class="p-swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image: url('./images/fadeslide01.jpg');">
        </div>
        <div class="swiper-slide" style="background-image: url('./images/fadeslide02.jpg');">     
        </div>
        <div class="swiper-slide" style="background-image: url('./images/fadeslide03.jpg');">    
        </div>
    </div>
    <!-- pagination -->
    <div class="swiper-pagination"></div>
    <!-- navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

JavaScriptで書くこと

ご自身で作成したinit.jsの中に以下のコピペします。フェードで自動で開始、ループの設定です。スピードなどの数値はお好みで調整してください。

window.addEventListener('load', () => {
    const elem = document.querySelector('.p-swiper-container');
    if (elem === null) return;
    const swiperParams = {
      loop: true, // ループさせる
      effect: 'fade', // フェードのエフェクト
      autoplay: {
        delay: 4000, // ４秒後に次の画像へ
        disableOnInteraction: false, // ユーザー操作後に自動再生を再開する
      },
      speed: 2000, // ２秒かけながら次の画像へ移動
      allowTouchMove: false, // マウスでのスワイプを禁止
      navigation: {
        // 左右のページ送りを有効にする
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
        // 円形のページネーションを有効にする
        el: '.swiper-pagination',
        clickable: true, // クリックを有効にする
      },
    };
    const swiper = new Swiper('.p-swiper-container', swiperParams);
  });

CSSで見た目を整える

.p-swiper-container{
  position: relative;
}
.swiper-slide {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 60vh;
    overflow: hidden;
    backface-visibility: hidden;
}

これで基本的な設定は終わりです。スライダーが動かない場合や表示がおかしいときは、ファイルパスに間違いがないか確認してみてください。

スライダーの上にテキストをのせたい場合は？

スライダーの上にテキストをのせたい場合はデモページにコードを書いておいたので参考にしてみてください。各スライダーの上にテキストがあり、スライダーがフェードするタイミングで、同じようにテキストもフェードで切り替わります。

デモページ

ページネーションとナビゲーションの色を変える

丸型のページネーションや左右のページ送りは、デフォルトでは青色の矢印になっています。この色を変更するためには.p-swiper-containerの要素に以下のようにstyleを追加する必要があります。

以下は白色に変更した例です。

<div class="p-swiper-container" style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
<!-- 以下省略 -->