最終更新日：2021/01/25

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

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

※今回はswiper.jsを使いますが、背景画像に特化しているわけではなく、普通の画像もテキストもスライドできます

※2020.04.1追記
JQueryを使わず、最新のSwiperの書き方に変更しました。

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

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

それではさっそく説明していきます。

swiperに必要はファイルを読み込む

配布サイトからswiper.jsをダウンロードします。バージョンは４系を選びましょう。最新の５系はIEをサポートしていません。

ダウンロードするとdistというフォルダの中にあるcssとjsフォルダから以下の２つのファイルを取り出して、サイトにインポートします。

・swiper.min.js
・swiper.min.css

ファイルは以下のように読み込みましょう。init.jsというファイルを作成して、ここにswiperを動かす内容を書いていきます。この段階では何も書かれていなくて大丈夫です。

<!-- cssの読み込み -->
<link rel="stylesheet" href="./path/to/swiper.min.css">
<!-- JavaScriptの読み込み -->
<script src="./path/to/swiper.min.js"></script>
<script src="./path/to/init.js"></script>

swiper用のcssやjsファイルをダウンロードしなくても、以下のようにCDNから読み込むこともできます。個人的にはサーバーを圧迫せず、高速で読み込まれるこちら方法をおすすめします。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>

スライダーを表示させたい場所を整える

swiperの使うときの基本の形は以下になります。swiper専用のclass名が決まっているので変えないようにしましょう。

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

<div class="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 swiper-pagination-white"></div>
 
    <!-- navigation buttons -->
    <div class="swiper-button-prev swiper-button-white"></div>
    <div class="swiper-button-next swiper-button-white"></div>
 
</div>

swiperを動かす定義を書く

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

(function () {
  var elem = document.querySelector(".swiper-container");
  if (elem !== null) { //swiper-containerがあれば…
  var mySwiper = new Swiper(".swiper-container", {
    loop: true, //ループさせる
    effect: "fade", //フェードのエフェクト
    autoplay: {
      delay: 4000, //４秒後に次の画像へ
      disableOnInteraction: false //ユーザー操作後に自動再生を再開する
    },
    speed: 2000 //２秒かけながら次の画像へ移動
    navigation: { //左右のページ送りを有効にする
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
    },
    pagination: { //円形のページネーションを有効にする
      el: ".swiper-pagination",
      clickable: true //クリックを有効にする
    }
  });
}
})();

CSSで見た目を整える

.swiper-wrapper .swiper-slide {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;  //全画面表示
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

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