1. ホーム /
  2. Javascript /
  3. 【Swiper】カバーフロースライダーを作成する
  • 2023.01.07

【Swiper】カバーフロースライダーを作成する

coverflow slider

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スライダーができました。

slide_image1
slide_image2
slide_image3
slide_image3




②スライドを複数枚表示にする

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",
    },
})
slide_image1
slide_image2
slide_image3
slide_image3






③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",
    },
})

カバーフロースライダーができました！

slide_image1
slide_image2
slide_image3
slide_image3





④coverflowEffectオプションで細かい調整を行う

effect: “coverflow”を指定すると、coverflowEffectオプションで細かい調整を行うことができます。
coverflowEffect指に指定できるオプションは以下になります。

オプション名型デフォルト値説明
rotatenumber50前後のスライドの回転
depthnumber100前後のスライドの奥行
stretchnumber0スライド間のスペース
modifiernumber1rotate・depth・stretchの値を乗算する
scalenumber1前後のスライドのサイズ比率
slideShadowsbooleantrue前後のスライド表面の影の有無


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オプションはスライドの幅のサイズより小さい値を指定すると、スライド間の幅が縮みます）。

slide_image1
slide_image2
slide_image3
slide_image3






ソースコード全文

最後にソースコードを全文載せておきます。

<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スライダーのデモ19選

スポンサーリンク

レバテックキャリアの広告画像

You can subscribe by SNS

スポンサーリンク

人気の記事

コメントを残す

*