• 最終更新日:

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

背景画像をフェードで切り替えるスライダー

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

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

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

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

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

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

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

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

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

・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の中に以下のコピペします。フェードで自動で開始、ループの設定です。スピードなどの数値はお好みで調整してください。

if (document.querySelector(".swiper-container")) {
  var mySwiper = new Swiper(".swiper-container", {
    loop: true, //ループさせる
    effect: "fade", //フェードのエフェクト
    autoplay: {
      delay: 4000, //4秒後に次の画像へ
      disableOnInteraction: false //ユーザー操作後に自動再生を再開する
    },
    speed: 2000 //2秒かけながら次の画像へ移動
  });
}

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;
}

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

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

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

ページネーションのデザインを変えるには?

丸型のページネーションや左右のページ送りは、デフォルトでは青色の矢印になっています。色を白に変更するためには以下のクラス名をつける必要があります。

  • swiper-pagination-white … 丸のページネーション用
  • swiper-button-white … 左右のページ送り用

さいごに

今回はswiper.jsを使って背景画像をフェードさせる方法を紹介しましたが、背景画像に限らず通常のスライダー機能も豊富です。swiperのデモサイトがあるので参考にしてみてください。

Swiperを使ったスライダーについては、他の記事にも書いているので興味のある方はどうぞ。