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

swiper.jsのエフェクトオプションを使用してスライドがふわっと切り替わるフェードスライダーを作成する方法を記します。

通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていただきますので、Swiper.jsを初めて使う方はこちらから先に参考いただければと思います。
Swiper.jsでスライダーを実装する

①通常のSwiperスライダーを作成
②フェードエフェクトを適用する
③スライドの重なりを解消する
ソースコード全文

①通常の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', {
        loop: true,                         //ループ
        autoplay: {                         //自動再生
            delay: 2000,
        },
        pagination: {                       //ページネーション（ドット）
            el: '.swiper-pagination',
        },
        navigation: {                       //ナビゲーション（矢印）
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    })
</script>

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

②フェードエフェクトを適用する

下記のようにeffect:‘fade’を追加する事でフェードエフェクトを適用することができます。
また、動きがわかりやすいようにスライドスピードを少し遅くしておきます。

const swiper = new Swiper('.sample-slider', {
    loop: true,
    speed: 1500,            //追加（スライドスピード）
    effect: 'fade',         //追加（フェードエフェクトを適用する）
    autoplay: {
        delay: 2000,
    },
    pagination: {
        el: '.swiper-pagination',
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
})

③スライドの重なりを解消する

フェードエフェクトを使用するとサイズが違う画像を使用した時にスライドが重なって見えてしまうことがあります。この重なりを解消するにはfadeEffectの中にcrossFade:trueを指定します。

const swiper = new Swiper('.sample-slider', {
    loop: true,
    speed: 1500,
    effect: 'fade',
    fadeEffect: {           //追加
        crossFade: true     //追加 (スライドの重なりを解消)
    },                      //追加
    autoplay: {
        delay: 2000,
    },
    pagination: {
        el: '.swiper-pagination',
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
})

ソースコード全文

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

<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', {
        loop: true,
        speed: 1500,
        effect: 'fade',         // フェードエフェクトを適用
        fadeEffect: {           
            crossFade: true     // スライドの重なりを解消
        },
        autoplay: {
            delay: 2000,
        },
        pagination: {
            el: '.swiper-pagination',
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    })
</script>

以上、swiper.jsのエフェクトオプションを使用してフェードスライダーを作成する方法でした。

エフェクトオプションを使用して作成できるスライダーは他にも下記のようなものがあります。
【Swiper】キューブスライダーを作成する
 【Swiper】カードスライダーを作成する
 【Swiper】カバーフロースライダーを作成する
 【Swiper】フリップスライダーを作成する
 【Swiper】クリエイティブエフェクトでオリジナルスライダーを作成する

また、下記ではSwiperスライダーの様々なカスタマイズ方法を記しているのでぜひ覗いてみてください!
Swiperスライダーのデモ22選