• 最終更新日:

背景画像をズームアップしながらフェードで切り替えるスライダー - Swiperで実装する方法

背景画像をズームアップしながらフェードで切り替えるスライダー

今回は背景画像をズームアップさせながらフェードで切り替えるスライダーを、Swiperを使って実装します。Swiperなどのプラグインを使わなくても実現できますが、ページネションの設定や1ページに複数スライダーを配置することを考えるとプラグインを使ったほうが手軽です。

設定条件は以下。

  • jQueryは使わない(使わなくでも動きます)
  • Swiperのバージョンは4系を使用する(5系はIEをサポートしてないため)

デモページを作成したのでまずは確認してみてください。

背景画像をズームアップしながらフェードで切り替えるスライダーを実装する

まずはSwiperをインストールしましょう。

Swiperのファイルを読み込む

CDNを使って読み込むのであれば以下の2行をheadの中に読み込めば準備完了です。Swiperのバージョンは4系を読み込みます。5系はIEをサポートしていません。

CDNの他のバージョンを読み込みたい方は以下のリンクから選んでください。

CDNのSwiperのバージョンを選ぶ

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

CDNからではなく、直接ファイルを配置したい方は、以下のURLからSwiperのzipファイルをダウンロードしましょう。

Swiperのバージョンをダウンロード

zipファイルを解凍したら、cssフォルダとjsフォルダからswiper.min.cssとswiper.min.jsをそれぞれ見つけてご自身の環境にドラック&ドロップしましょう。

  • swiper.min.css
  • swiper.min.js

インポートしたファイルはheadに読み込みます。

<link rel="stylesheet" href="./path/to/swiper.min.css" />
<script src="./path/to/swiper.min.js"></script>

HTMLに書くこと

Swiperを使用するときのHTMLは以下のようになります。必ず必要なclass名は以下の3つです。ページネーションや左右のページ送りの部分は必要ない場合は消してもかまいません。今回は表示させる前提で説明していきます。

  • swiper-container
  • swiper-wrapper
  • swiper-slide
<div class="swiper-container">
  <div class="swiper-wrapper">
     <!-- 背景画像1 -->
     <div class="swiper-slide">
        <div class="slide-img" style="background-image: url('./images/swiper-img01.jpg');"></div>
     </div>
     <!-- 背景画像2 -->
     <div class="swiper-slide">
        <div class="slide-img" style="background-image: url('./images/swiper-img01.jpg');"></div>
     </div>
     <!-- 背景画像3 -->
     <div class="swiper-slide">
       <div class="slide-img" style="background-image: url('./images/swiper-img01.jpg');"></div>
     </div>
  </div>
  <!-- 丸いページネーション -->
  <div class="swiper-pagination swiper-pagination-white"></div>

  <!-- 左右のページ送り -->
  <div class="swiper-button-prev swiper-button-white"></div>
  <div class="swiper-button-next swiper-button-white"></div>
</div>

CSSに書くこと

12秒かけてズームさせて、600pxの高さに背景画像を表示させる設定です。

@-webkit-keyframes zoomUp {
  0% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
  100% {
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
  }
}

@keyframes zoomUp { /* 1.15倍させる指定 */
  0% {
      -webkit-transform: scale(1);
      transform: scale(1);
  }
  100% {
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
  }
}

.swiper-slide {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img { /* 12秒かけて拡大させる */
    -webkit-animation: zoomUp 12s linear 0s;
    animation: zoomUp 12s linear 0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.slide-img {
    background-size: cover; 
    background-position: center center; /* 背景画像は中央を軸に表示させる */
    height: 600px; /* 600pxの高さで表示させる */
}

JavaScriptsに書くこと

init.jsなどのファイルを作成して以下を内容をコピペします。作成したinit.jsはheadに読み込みましょう。

let mySwiper = new Swiper(".swiper-container", {
  // Optional parameters
  loop: true, // ループの指定
  effect: "fade", //フェードの指定
  autoplay: {
      delay: 4000, //4秒後に次のスライドへ
      disableOnInteraction: false //ユーザー側で操作してもスライドを止めない
  },
  speed: 2000, //2秒かけてフェードで切り替わる
  pagination: { // 丸のページネーションを使うなら書く
      el: ".swiper-pagination"
  },
  navigation: { // 左右のページ送を使うなら書く
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
  }
});

1ページにスライダーを複数使いたい場合は?

1ページに違うエフェクトのスライダーを複数使う場合はjsに以下のように書きます。パラメーターの書き方は一緒です。

let mySwiper01 = new Swiper(".swiper01", {
  // パラメーターの指定の仕方は一緒なので省略
 
});

let mySwiper02 = new Swiper(".swiper02", {
  // パラメーターの指定の仕方は一緒なので省略
  
});

HTMLに書くところも少しだけ変わります。swiper-containerのクラス名のところにjsに書いたswiper01、swiper02をそれぞれ追加します。

<div class="swiper-container swiper01">
   <!-- この中に書く内容は一緒なので省略 -->
     
</div>

<div class="swiper-container swiper02">
   <!-- この中に書く内容は一緒なので省略 -->
     
</div>

この設定で1ページにそれぞれ違うエフェクトのスライダーを実装できます。

背景画像の中にテキストを入れたい場合は?

背景画像の上にテキストを乗せることもできます。swiper-slideの中を以下のようにします。

<div class="swiper-slide">
     <div class="slide-img" style="background-image: url('./images/swiper-img01.jpg');" ></div>
     <div class="slide-text">
         <p>ここにテキスト</p>
     </div>
</div>

テキストを中央表示する場合はcssを以下のようにします。フォントサイズや色は好きなものに変更しましょう。

.slide-text {
      position: absolute;
      z-index: 10;
      font-size: 4rem;
      color: #fff;
      width: 100%;
      top: 45%;
      text-align: center;
      font-weight: bold;
}

さいごに…

今回は背景画像をSwiperを使ってズームアップしながらフェードさせるスライダーを紹介しました。背景画像だけではなく通常の画像としても同じようにズームさせることが可能です。

Swiperを使って違うエフェクトを試したい方は以下のリンクからパラメーターが見れます。

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