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

記事内に広告を含みます

パソ君

・フェードで切り替えるスライダーって作れる？

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

Swiperでスライダーを作った時、スライド切替をフェードにしたい場合ありますよね。

実は簡単に実装可能です。

ジト

すぐにできるよ！

ということで、この記事では「フェードで切り替えるスライダー」について解説していきます！

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

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

この記事でわかること

・フェードで切り替えるスライダー
・フェード＋ズームで切り替えるスライダー

【Swiper】フェードで切り替えるスライダー作成
【Swiper】フェードで切り替えるスライダー作成【ズーム版】
【Swiper】フェードで切り替えるスライダー作成【ズームも可能】：まとめ

【Swiper】フェードで切り替えるスライダー作成

そんなフェードで切り替えるスライダーサンプルがこちら↓

See the Pen swiper　フェードで切り替え by jito-coder (@jito-coder) on CodePen.

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide01">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
        </div>
        <div class="swiper-slide swiper-slide02">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="">
        </div>
        <!-- 省略 -->
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

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

コードの中で重要な点がこちら↓

通常通りのスライダーを実装
オプションにてeffectを設定
画像重なりの対策をする

順に解説してきます。

➀：通常通りのスライダーを実装

まず通常通りのスライダーを実装するHTMLを組み立てます。

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide01">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
        </div>
        <div class="swiper-slide swiper-slide02">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="">
        </div>
        <!-- 省略 -->
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

ここに関してはいつも通りでOKです。

➁：オプションにてeffectを設定

「effect: ‘fade’,」というオプションを記述することで、フェードで切り替えることができます。

window.onload = function() {
    const swiper = new Swiper(".swiper", {
        loop: true,
        speed: 2000,
        autoplay: {
            delay: 2000,
        },
        effect: 'fade',
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
}

あとは「speed」等の速度を変えることで、フェードの切替わりがわかりやすくなります。

➂：画像重なりの対策をする

➁で実装自体は完了です。ただし注意点があります。

というのもフェードで切り替える場合、画像の透過や大きさによっては、下画像と重なる場合があるんですよね。。

重なりを対策するために、下記コードを追加しておきましょう。

fadeEffect: {           
    crossFade: true
},

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

これで完成です！

【Swiper】フェードで切り替えるスライダー作成【ズーム版】

最後にフェードしつつ、ズームしながら切り替えるスライダーを紹介していきます。

そんなサンプルがこちら↓

See the Pen swiper　フェード＋ズームで切り替え by jito-coder (@jito-coder) on CodePen.

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide01">
            <!-- さらにdivタグで囲む -->
            <div class="swiper-slide__item">
                <img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
            </div>
        </div>
        <div class="swiper-slide swiper-slide02">
            <!-- さらにdivタグで囲む -->
            <div class="swiper-slide__item">
                <img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="">
            </div>
        </div>
        <div class="swiper-slide swiper-slide03">
            <!-- さらにdivタグで囲む -->
            <div class="swiper-slide__item">
                <img src="https://jito-site.com/wp-content/uploads/2023/01/3.png" alt="">
            </div>
        </div>
        <div class="swiper-slide swiper-slide04">
            <!-- さらにdivタグで囲む -->
            <div class="swiper-slide__item">
                <img src="https://jito-site.com/wp-content/uploads/2023/01/4.png" alt="">
            </div>
        </div>
    </div>
</div>

.swiper-slide-active .swiper-slide__item,
.swiper-slide-duplicate-active .swiper-slide__item,
.swiper-slide-prev .swiper-slide__item {
    animation: zoomanime 5s linear 0s normal both;
}

@keyframes zoomanime {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.3);
    }
}

window.onload = function() {
    const swiper = new Swiper(".swiper", {
        loop: true,
        speed: 2000,
        autoplay: {
            delay: 2000,
        },
        effect: 'fade',
        fadeEffect: {           
            crossFade: true
        },
    });
}

コードの中で重要な点がこちら↓

スライド要素をさらにdivタグで囲む
切り替えるスライドにアニメーションを指定
ドットと矢印をなくしておく

順に解説してきます。

➀：スライド要素をさらにdivタグで囲む

ズームで切り替える場合は、先ほどとHTMLの組み立てを少し変えます。

スライド要素に対して、さらにdivタグで囲んでおきましょう。

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide01">
            <!-- さらにdivタグで囲む -->
            <div class="swiper-slide__item">
                <img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
            </div>
        </div>
        <div class="swiper-slide swiper-slide02">
            <!-- さらにdivタグで囲む -->
            <div class="swiper-slide__item">
                <img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="">
            </div>
        </div>
        <div class="swiper-slide swiper-slide03">
            <!-- さらにdivタグで囲む -->
            <div class="swiper-slide__item">
                <img src="https://jito-site.com/wp-content/uploads/2023/01/3.png" alt="">
            </div>
        </div>
        <div class="swiper-slide swiper-slide04">
            <!-- さらにdivタグで囲む -->
            <div class="swiper-slide__item">
                <img src="https://jito-site.com/wp-content/uploads/2023/01/4.png" alt="">
            </div>
        </div>
    </div>
</div>

例として「swiper-slide__item」というdivタグを追加しました。

➁：切り替えるスライドにアニメーションを指定

続いてズーム用のアニメーションを追加します。

@keyframes zoomanime {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.3);
    }
}

アニメーションは「scale(1)」⇒「scale(1.3)」に拡大させるという内容です。

これを切り替えるスライド達に指定していきます。

指定するクラスや記述例が下記ですね↓

.swiper-slide-active .swiper-slide__item,
.swiper-slide-duplicate-active .swiper-slide__item,
.swiper-slide-prev .swiper-slide__item {
    animation: zoomanime 5s linear 0s normal both;
}

.swiper-slide-active	表示中のスライド
.swiper-slide-duplicate-active	ループ時の最後と最初の切り替える時につく
.swiper-slide-prev	表示中の前スライド

５秒かけてスライド要素がズームしていくアニメーションを実装できました。

秒数に注意

今回は例として５秒かけてズームアニメーションを実装しております。

そのためJavaScriptに記述する切替秒数速度は、５秒以下にしておきましょう。

window.onload = function() {
    const swiper = new Swiper(".swiper", {
        loop: true,
        speed: 2000,
        autoplay: {
            delay: 2000,
        },
        effect: 'fade',
        fadeEffect: {           
            crossFade: true
        },
    });
}

要はアニメーション秒数より少なめにするということです。

でないと、スライドが停止する時間が生まれてしまいます。。

そのため注意しましょう。