swiper.jsのエフェクトオプションを使用して当記事アイキャッチのようなカバーフロースライダーを作成する方法を記します。
また、coverflowEffectで細かい調整を行う方法についても説明します。
通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていただきますので、Swiper.jsを初めて使う方はこちらから先に参考いただければと思います。
Swiper.jsでスライダーを実装する
①通常のSwiperスライダーを作成
わかりやすいように、最初に通常のSwiperスライダーを作成して、そこから変更を加えていきます。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<style>
.sample-slider{
width:70%;
}
.sample-slider img{
width: 100%;
}
</style>
<div class="swiper sample-slider">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/sample1.png"></div>
<div class="swiper-slide"><img src="./img/sample2.png"></div>
<div class="swiper-slide"><img src="./img/sample3.png"></div>
<div class="swiper-slide"><img src="./img/sample4.png"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script>
const swiper = new Swiper('.sample-slider', {
loop: true, //ループ
pagination: { //ページネーション（ドット）
el: '.swiper-pagination',
},
navigation: { //ナビゲーション（矢印）
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
</script>通常のSwiperスライダーができました。
②スライドを複数枚表示にする
slidesPerViewでオプションでスライドを複数枚表示にできます。
また、centeredSlidesオプションをtrueに1枚目のスライドを真ん中に持ってきましょう。
const swiper = new Swiper('.sample-slider', {
loop: true,
slidesPerView: 3, //追加（スライドを複数枚表示に）
centeredSlides: true, //追加（1枚目のスライドを真ん中に）
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})③coverflowエフェクトを適用する
下記のようにオプションに effect: “coverflow” を追加します。
const swiper = new Swiper('.sample-slider', {
loop: true,
slidesPerView: 3,
centeredSlides: true,
effect: "coverflow", //追加（coverflowエフェクトを適用）
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})カバーフロースライダーができました！
④coverflowEffectオプションで細かい調整を行う
effect: “coverflow”を指定すると、coverflowEffectオプションで細かい調整を行うことができます。
coverflowEffect指に指定できるオプションは以下になります。
| オプション名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| rotate | number | 50 | 前後のスライドの回転 |
| depth | number | 100 | 前後のスライドの奥行 |
| stretch | number | 0 | スライド間のスペース |
| modifier | number | 1 | rotate・depth・stretchの値を乗算する |
| scale | number | 1 | 前後のスライドのサイズ比率 |
| slideShadows | boolean | true | 前後のスライド表面の影の有無 |
coverflowEffectオプションを使用した例を一つ見てみましょう。
const swiper = new Swiper('.sample-slider', {
loop: true,
slidesPerView: 3,
centeredSlides: true,
effect: "coverflow",
coverflowEffect: { // 追加
rotate: 0, // 追加 (前後のスライドの回転)
depth: 200, // 追加 (前後のスライドの奥行)
stretch: 30, // 追加 (スライド間のスペース)
modifier: 1, // 追加 (rotate・depth・stretchの値を乗算する)
scale: 1, // 追加 (前後のスライドのサイズ比率)
slideShadows: false, // 追加 (前後のスライド表面の影の有無)
}, // 追加
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
回転をなくし、奥行を大きく、スライド間のスペースを縮めています。（stretchオプションはスライドの幅のサイズより小さい値を指定すると、スライド間の幅が縮みます）。
ソースコード全文
最後にソースコードを全文載せておきます。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<style>
.sample-slider{
width:70%;
}
.sample-slider img{
width: 100%;
}
</style>
<div class="swiper sample-slider">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/sample1.png"></div>
<div class="swiper-slide"><img src="./img/sample2.png"></div>
<div class="swiper-slide"><img src="./img/sample3.png"></div>
<div class="swiper-slide"><img src="./img/sample4.png"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script>
const swiper = new Swiper('.sample-slider', {
loop: true, // ループ
slidesPerView: 3, // スライドを複数枚表示に
centeredSlides: true, // 1枚目のスライドを真ん中に
effect: "coverflow", // coverflowエフェクトを適用
coverflowEffect: {
rotate: 0, // 前後のスライドの回転
depth: 200, // 前後のスライドの奥行
stretch: 30, // スライド間のスペース
modifier: 1, // rotate・depth・stretchの値を乗算する
scale: 1, // 前後のスライドのサイズ比率
slideShadows: false, // 前後のスライド表面の影の有無
},
pagination: { // ページネーション（ドット）
el: '.swiper-pagination',
},
navigation: { // ナビゲーション（矢印）
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
</script>
以上、swiper.jsを使用してカバーフロースライダーを作成する方法でした。
effectオプションを使用して作成できるスライダーは他にも下記のようなものがあります。
【Swiper】キューブスライダーを作成する
【Swiper】カードスライダーを作成する
【Swiper】フリップスライダーを作成する
【Swiper】フェードスライダーを作成する
【Swiper】クリエイティブエフェクトでオリジナルスライダーを作成する
また、下記ではSwiperスライダーの様々なカスタマイズ方法を記しているのでぜひ覗いてみてください!
Swiperスライダーのデモ22選
