今回は、JavaScriptライブラリ「Swiper」とCSSを使用し、背景画像をズームしながらふわっと切り替えるスライドショーを作成したいと思います。
まずは実装デモがこちら。
デモ内［Result］の［Run Pen］をクリックしてください。
See the Pen
Untitled by 林 (@hayashi-akina)
on CodePen.
Swiperはスライダーが作成できるライブラリです。jQuery非依存のため、jQueryを必要とする他のスライダーライブラリよりも高速で読み込むことができます。また、レスポンシブおよびタッチデバイス（スマホやタブレット）対応なので、覚えてしまえば簡単に実装ができ、使いやすいです。
Swiperを動かすには、CSSファイルとJavaScriptファイルの読み込みが必要です。ライブラリを読み込む方法としては次の3つがあります。
今回は、簡単にできるCDNで設定したいと思います。設定方法は公式サイトにもありますので参照ください。
<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です。
<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］は背景画像を入れるためクラスを追加しているので、ここは任意のクラス名を入れてください。
.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秒以上でしたら問題ありません。
］
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はオプションが多くさまざまなスライダーを表現することができるので、ぜひ一度作成してみてください。
株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。
サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。