株式会社オートプロジェクト

Columnコラム
  • TOP
  • コラム一覧
  • SwiperとCSSを使用し、スライダーの背景画像をズームしながらふわっと切り替えする方法
2023年1月23日
SwiperとCSSを使用し、スライダーの背景画像をズームしながらふわっと切り替えする方法

今回は、JavaScriptライブラリ「Swiper」とCSSを使用し、背景画像をズームしながらふわっと切り替えるスライドショーを作成したいと思います。

まずは実装デモがこちら。

デモ内[Result]の[Run Pen]をクリックしてください。

See the Pen
Untitled
by 林 (@hayashi-akina)
on CodePen.

Swiperとは

Swiperはスライダーが作成できるライブラリです。jQuery非依存のため、jQueryを必要とする他のスライダーライブラリよりも高速で読み込むことができます。また、レスポンシブおよびタッチデバイス(スマホやタブレット)対応なので、覚えてしまえば簡単に実装ができ、使いやすいです。

はじめに

Swiperを動かすには、CSSファイルとJavaScriptファイルの読み込みが必要です。ライブラリを読み込む方法としては次の3つがあります。

    • npm
    • ファイルを直接ダウンロード
    • CDN

今回は、簡単にできるCDNで設定したいと思います。設定方法は公式サイトにもありますので参照ください。

Getting Started With Swiper

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

上記、CSSファイルとJavaScriptのファイルのリンクをHTMLのheadの中に入れてください。

下記はスライダーに必要なHTML、CSS、JavaScriptです。

HTML

<div class="main-top">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide sw-1">
        <div></div>
      </div>
      <div class="swiper-slide sw-2">
        <div></div>
      </div>
      <div class="swiper-slide sw-3">
        <div></div>
      </div>
    </div>
  </div>
</div>

[.swiper-container][.swiper-wrapper][.swiper-slide]のクラス名はSwiperに必要なので必ず入れてください。

[.swiper-slide]の横にある[sw-1]は背景画像を入れるためクラスを追加しているので、ここは任意のクラス名を入れてください。

CSS

.main-top{
grid-row: main;
height: 100vh;
width: 100vw;
}
.swiper-container{
height: 100%;
width: 100%;
overflow: hidden;
}
.swiper-wrapper,
.swiper-slide>div{
height: 100%;
width: 100%;
}

.swiper-slide.sw-1>div{
background: url("https://autoproject.nagoya/wp-content/uploads/25449995_s.jpg") center center / cover no-repeat;
}
.swiper-slide.sw-2>div{
background: url("https://autoproject.nagoya/wp-content/uploads/3042261_s.jpg") center center / cover no-repeat;
}
.swiper-slide.sw-3>div{
background: url("https://autoproject.nagoya/wp-content/uploads/3121864_s.jpg") center center / cover no-repeat;
}

@keyframes zoomUp { /* ズームアップで1.15倍させる指定 */
0% {
transform: scale(1);
}
100% {
transform: scale(1.15);
}
}
.swiper-slide-active>div, .swiper-slide-duplicate-active>div, .swiper-slide-prev>div{
animation: zoomUp 10s linear 0s 1 normal both;
}

[background: url]には任意の画像URLを設定してください。

[@keyframes]で画像のズームアップの設定をしていきます。

※[@keyframes]は、どのようなアニメーションをするのか指定できるCSSの文法です。[@keyframes]と[animation]プロパティはセットで使用され、CSSだけで実装することができます。

[animation: zoomUp 10s linear 0s 1 normal both;]の[zoomUp 10s]は、ズームアップアニメーションの秒数で今回は10秒に設定してます。

※注意※
秒数を変更する場合は、スライダーの切り替えまでの時間とフェードの時間を合わせた秒数よりも長くなるようにしてください。今回の例ですと、下記JavaScriptの中の、[delay: 4000,(4秒)]+[speed: 2000,(2秒)]=6秒なので、6秒以上でしたら問題ありません。

JavaScript

CSSを書いたら、次にSwiperを動かすJavaScriptを書きます。[Swiperの初期化]

<script>
let swipeOption = {
loop: true, // スライダーをループさせる設定
effect: 'fade', // フェードさせる為の設定
fadeEffect: {
crossFade: true//縦横比が統一されない画像の場合、重なる場合がある為、それを防ぐ設定
},

autoplay: {
delay: 4000, // 秒後に次の画像にいくようにする設定
disableOnInteraction: false,// ユーザーが操作後、自動再生を再開する設定
},
speed: 2000, // 2秒かけ次の画像へ移動させる設定
allowTouchMove: false, // マウスでのスワイプを禁止する設定
}
new Swiper('.swiper-container', swipeOption);
</script>

JavaScriptの記述は[</body>]タグの直前に入れてください。

まとめ

以上で設定は終わりです。今回紹介した切り替え方法以外にもSwiperはオプションが多くさまざまなスライダーを表現することができるので、ぜひ一度作成してみてください。

  1. Swiper