1. ホーム /
  2. Javascript /
  3. 【Swiper】カードスライダーを作成する
  • 2022.12.27

【Swiper】カードスライダーを作成する

card slider

当記事ではswiper.jsのエフェクトオプションを使用してカードスライダーを作成する方法を記します。
またcardsEffectで細かい調整を行う方法についても説明します。


通常の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:50%;
    }
    .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', {
        pagination: {                       //ページネーション（ドット）
            el: '.swiper-pagination',
        },
        navigation: {                       //ナビゲーション（矢印）
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    })
</script>

通常のスライダーができました。

slide_image1
slide_image2
slide_image3
slide_image3






②スライダーをカード型にする

スライダーをカード型にするには、オプションにeffect: “cards” を指定します。
ついでにカーソルも指定しておきます。

const swiper = new Swiper('.sample-slider', {
    effect: "cards",    //追加
    grabCursor: true,   //追加
    pagination: {
        el: '.swiper-pagination',
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
})

スライダーをカード型にできました！

slide_image1
slide_image2
slide_image3
slide_image3






③CSSで見た目を装飾

通常swiper-slideクラスにborder-radiusプロパティ効かないのですが、effect: “cards”を指定することで効くようになります。

.sample-slider{
    width:50%;
}
.sample-slider .swiper-slide{   /* 追記 */
    border-radius: 20px;        /* 追記 */
}                               /* 追記 */
.sample-slider img{
    width: 100%;
    vertical-align: bottom;     /* 追記 */
}

画像の角が丸まりました！

slide_image1
slide_image2
slide_image3
slide_image3






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

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

オプション名型デフォルト値説明
perSlideOffset数値8スライドの間隔（px）
perSlideRotate数値22枚目以降のスライドの回転角度
rotate論理値true2枚目以降のスライドの回転有無
slideShadow論理値true2枚目以降のスライドの影の有無（影は表面に付く）


cardsEffectオプションを使用した例を一つ見てみましょう。

const swiper = new Swiper('.sample-slider', {
    effect: "cards",
    cardsEffect: {                  // 追加
        perSlideOffset: 15,         // 追加（スライドの間隔（px）
        perSlideRotate: 10,         // 追加（2枚目以降のスライドの回転角度
        rotate: true,               // 追加（2枚目以降のスライドの回転（あり・なし）
        slideShadows: false,        // 追加（2枚目以降のスライドの影（あり・なし）
    },                              // 追加
    grabCursor: true,
    pagination: {
        el: '.swiper-pagination',
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
})



スライドの間隔と回転角度を大きくし、2枚目以降の影を消しています。


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 .swiper-slide{
        border-radius: 20px;
    }
    .sample-slider img{
        width: 100%;
        vertical-align: bottom;
    }
</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', {
        effect: "cards",                    //カード型に
        cardsEffect: {
            perSlideOffset: 15,             // スライドの間隔（px）
            perSlideRotate: 10,             // 2枚目以降のスライドの回転角度
            rotate: true,                   // 2枚目以降のスライドの回転（あり・なし）
            slideShadows: false,            // 2枚目以降のスライドの影（あり・なし）
        },
        grabCursor: true,                   //カーソルを掴む動作に
        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

スポンサーリンク

人気の記事

コメントを残す

*