スライダーライブラリ「Swiper」で自由なスライダーを実装
こんにちは、のーちゃんです。
今回はJavaScriptのスライダーライブラリである「Swiper」のクリエイティブエフェクト（effect: "creative"）についてまとめてみました。
クリエイティブエフェクトを使うことのメリットから、使い方やパラメータの説明について紹介します。
「Swiper」とは
クリエイティブエフェクト（effect: "creative"）を使うメリット
クリエイティブエフェクトとは
クリエイティブエフェクトは、「Swiper」に用意されているエフェクトの一つで、表示しているスライドの前後のスライドの動きや位置を指定することで、自在にスライダーの挙動を調整できます。
クリエイティブエフェクトのメリット
クリエイティブエフェクトを使うメリットは、スライドの動作をより細かく調整できたり、デフォルトの効果にないオリジナルの動きをスライダーで実現できることです。
「Swiper」使用まで
デモスライダー
デモをドラッグ（フリック）すると左右にスライドします。
「Swiper」を使うための最低限の準備（デモスライダーの完成）まで進めます。
まずは、CDNでライブラリを読み込むか、もしくは、CSS、JSファイルをダウンロードしてローカルに設置し、読み込んでください。
HTML
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
// headタグの中に記述
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
// bodyタグの閉じタグ前に記述
スライダー部分のHTML
HTML
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
</div>
</div>
CSS
CSS
html,
body {
position: relative;
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.swiper {
margin: 100px auto;
width: 320px;
height: 240px;
overflow: hidden;
}
.swiper-slide {
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: bold;
color: #fff;
}
.swiper-slide:nth-child(1n) {
background-color: rgb(206, 17, 17);
}
.swiper-slide:nth-child(2n) {
background-color: rgb(0, 140, 255);
}
.swiper-slide:nth-child(3n) {
background-color: rgb(10, 184, 111);
}
.swiper-slide:nth-child(4n) {
background-color: rgb(211, 122, 7);
}
.swiper-slide:nth-child(5n) {
background-color: rgb(118, 163, 12);
}
JS
js
const swiper = new Swiper(".swiper", {
// この後こちらにオプション内容を書いていきます。
});
動かないときの注意点
- JS、cssファイルが正しく読み込めていない
- JSファイルを読み込む順に誤りがある（ライブラリが先、初期化のコードは後に記述する）
- ベースとなる要素（HTML、JS）の記述が抜けている
動かない場合は、こちらの3点をもう一度確認してみてください。
デモのソースコードを1つのHTMLにまとめましたので参考にしてください。
参考HTMLはこちら
クリエイティブエフェクト（effect: "creative"）設定方法について
effect: "creative" 記入例
js
const swiper = new Swiper(".swiper", {
effect: "creative", // 「creative」を指定
creativeEffect: {
prev: {
translate: ["-100%", 0, -1], // x,y,z軸についての距離
rotate: [0, 0, -90], // x,y,z軸に対して回転の角度
opacity: 1, // numberを設定する
scale: 1, // numberを設定する
shadow: false, // true or false
origin: "right bottom", // スライドの原点を指定
},
next: {
translate: ["100%", 0, 1], // x,y,z軸についての距離
rotate: [0, 0, 180], // x,y,z軸に対して回転の角度
opacity: 1, // numberを設定する
scale: 1, // numberを設定する
shadow: false, // true or false
origin: "right bottom", // スライドの原点を指定
},
limitProgress: 2, // numberを設定する
perspective: true, // true or false
shadowPerProgress: false, // true or false
},
});
実際には全てのプロパティを指定しなくても動作します。
クリエイティブエフェクトで使用できるパラメータ
effect:
"creative"を設定することでcreativeEffect: { } 内を設定できます。
prev: { } 前、next: { } 次のスライドについての設定
アクティブなスライドに対して、前と次のスライドの位置を設定します。
prev: { }/next: { }の詳細について
設定できるプロパティは共通です。
・translate: [], // X, Y, Z の値を指定することでスライドの位置を指定できます。
・rotate: [], // x軸, y軸, z軸に対してそれぞれ回転率（傾き）を指定できます。
・opacity: number, // 不透明度の設定
・scale: number, // スライドの大きさについて拡大縮小
・shadow: boolean, // スライドの影の有無
・origin: string, // スライドの原点を指定できます。例： 「右下」
※numberは小数値も指定可能です。
limitProgress:
アクティブスライドの両隣で固定するか、アクティブスライドと両隣のスライドのさらに両隣以降のスライドから固定するかを選択できます。
後述のexample2、example3で見比べられるようにスライダーを用意しています。
perspective:
3Dの設定（translate Z, rotate X, rotate Y）を設定したい場合はtrueを指定します。
shadowPerProgress:
limitProgressに基づいてスライドごとにシャドウの「不透明度」を分割します（シャドウがshadow: true,になっている場合のみ適応されます）。
例えば limitProgress：2を設定し、shadowPerProgress: true,にすると、アクティブの隣の2つのスライドでシャドウの不透明度が0.5と1に設定されます。
このパラメータを無効にすると、アクティブの横にあるすべてのスライドにopacity: 1,の影が表示されます。
example1
translate: [],を使用したスライダー例です。
js
const swiper_example1 = new Swiper(".swiper_example1", {
effect: "creative", // 「creative」を指定
creativeEffect: {
prev: {
// 前のスライドのZ軸（奥行）対して(-400px)を設定しています
translate: [0, 0, -400],
},
next: {
// 次のスライドのX軸（左右）対して(100%)を設定しています
translate: ["100%", 0, 0],
},
}
});
example2
limitProgress: 1,のスライダー例です。以降で紹介してますexample3と比較してください
example2のJS
js
const swiper_example2 = new Swiper(".swiper_example2", {
effect: "creative",
creativeEffect: {
effect: "creative",
creativeEffect: {
limitProgress: 1,
prev: {
translate: ["100%", 0, 0],
rotate: [30, 0, 0],
},
next: {
translate: ["-100%", 0, 0],
rotate: [0, 0, -90],
},
}
},
});
example3
limitProgress: 2,のスライダー例です。
example3のJS
js
const swiper_example3 = new Swiper(".swiper_example3", {
effect: "creative",
creativeEffect: {
effect: "creative",
creativeEffect: {
limitProgress: 2,
prev: {
translate: ["100%", 0, 0],
rotate: [30, 0, 0],
},
next: {
translate: ["-100%", 0, 0],
rotate: [0, 0, -90],
},
}
},
});
まとめ
「Swiper」デフォルトのエフェクトについての記事は数多くありますが、クリエイティブエフェクト（effect: "creative"）についての日本語の記事をあまり見かけなかったのでまとめてみました。
スピード重視でスライダーを作成する場合はデフォルトのエフェクトで十分ですが、もう少し凝った動きを再現したい場合や、オリジナルのスライダーを作成したい時にはもってこいのパラメータとなっています。
今回紹介した内容以外にもたくさん機能がありますので、さらに詳しく知りたいという方は、公式ページを確認してみてください。
