【解説】Swiperで使えるエフェクトオプション６選【サンプルあり】

記事内に広告を含みます

パソ君

・Swiperで使えるエフェクトオプションは何がある？

こんな疑問にお答えします。

Swiperにはエフェクトオプションが存在します。

これを使うことで、スライドにアニメーションを効かすことが可能に。

指定方法も簡単なのですぐに実装できます。

ジト

覚えておくべし！

ということで、この記事では「Swiperで使えるエフェクトオプション６選」について解説していきます！

swiper自体の作り方については下記記事を参考に↓

2023年2月20日【簡単】Swiperの使い方｜初心者向けに解説【オプション】

この記事でわかること

Swiperで使えるエフェクトオプション６選

【解説】Swiperで使えるエフェクトオプション６選【サンプルあり】
【解説】Swiperで使えるエフェクトオプション６選【サンプルあり】：まとめ

【解説】Swiperで使えるエフェクトオプション６選【サンプルあり】

そんなSwiperで使えるエフェクトオプションですが、主に6個あります。

flip
fade
cube
cards
coverflow
creative

順に解説してきます。

➀：flip

1つのエフェクトが「flip」です。

スライドの切り替えが反転するような見え方になります。

See the Pen swiper　エフェクトオプション➀ by jito-coder (@jito-coder) on CodePen.

window.onload = function() {
    const swiper = new Swiper(".swiper", {
        effect: 'flip',
        spaceBetween: 20,
        slidesPerView: 1,
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
}

こちらは1枚表示のみのエフェクトです。

➁：fade

2つのエフェクトが「fade」です。

スライドの切り替えがフェードするような見え方になります。

See the Pen swiper　エフェクトオプション➁ by jito-coder (@jito-coder) on CodePen.

window.onload = function() {
    const swiper = new Swiper(".swiper", {
        effect: 'fade',
        fadeEffect: {
            crossFade: true
        }, 
        speed: 700,
        spaceBetween: 20,
        slidesPerView: 1,
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
}

こちらは1枚表示のみのエフェクトです。

下記記事にて詳しい解説しておりますのでどうぞ↓

2023年12月1日【Swiper】フェードで切り替えるスライダー作成【ズームも可能】

➂：cube

3つのエフェクトが「cube」です。

スライドの切り替えが３Dのキューブのような見え方になります。

See the Pen swiper　エフェクトオプション➁ by jito-coder (@jito-coder) on CodePen.

window.onload = function() {
    const swiper = new Swiper(".swiper", {
        effect: 'cube',
        spaceBetween: 20,
        slidesPerView: 1,
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
}

こちらは1枚表示のみのエフェクトです。

➃：cards

4つのエフェクトが「cards」です。

スライドの切り替えがカードが動くような見え方になります。

See the Pen swiper　エフェクトオプション➃ by jito-coder (@jito-coder) on CodePen.

window.onload = function() {
    const swiper = new Swiper(".swiper", {
        effect: 'cards',
        spaceBetween: 20,
        slidesPerView: 1,
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
}

こちらは1枚表示のみのエフェクトです。

➄：coverflow

5つのエフェクトが「coverflow」です。

スライドの切り替えが奥行があるような見え方になります。

See the Pen swiper　エフェクトオプション➄ by jito-coder (@jito-coder) on CodePen.

window.onload = function() {
    const swiper = new Swiper(".swiper", {
        effect: 'coverflow',
        spaceBetween: 20,
        slidesPerView: 1,
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
}

こちらは複数枚に変更可能なエフェクトです。

➅：creative

6つのエフェクトが「creative」です。

スライドの切り替えにて、位置や角度を自由に調整できます。

今回は例として下記のようなスライダーにしてみました↓

See the Pen swiper　エフェクトオプション➅ by jito-coder (@jito-coder) on CodePen.

window.onload = function() {
    const swiper = new Swiper(".swiper", {
        effect: 'creative',
        creativeEffect: {
            limitProgress: 2,
            prev: {
                translate: ["50%", -100, -100],
                rotate: [0, 0, 65],
                shadow: true,
            },
            next: {
                translate: ["-50%", 100, -100],
                rotate: [0, 0, 65],
                shadow: true,
            },
        },
        spaceBetween: 20,
        slidesPerView: 2,
        centeredSlides : true,    
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
}

「creativeEffect」を使って、細かい調整が可能です。