Swiperは簡単にスライダーを実装できる人気のプラグインです。
フェードでの切り替えやカルーセルなどデフォルトで多くの切り替えアニメーションに対応していますが、マスク効果で切り替えるアニメーションは用意されていません。
Swiperを使いつつ、マスク効果で切り替えるには切り替えアニメーション部分を自分で作成する必要があります。
この記事ではSwiperを使ってマスク効果で切り替えるスライダーアニメーションの実装方法をご紹介したいと思います。

完成サンプル

まずは完成サンプルから。

HTMLはこちら。

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="#"></div>
        <div class="swiper-slide"><img src="#"></div>
        <div class="swiper-slide"><img src="#"></div>
    </div>
</div>

続いて、CSSはこちら。

*{
    margin: 0;
    padding: 0;
}
.swiper-slide{
    width: 500px;
    height: 100vh;
}
.swiper-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: clip-path .3s ease-in-out;
}
.swiper-slide.swiper-slide-next img{
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
.swiper-slide.swiper-slide-active img{
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

最後にScriptはこちら。

const swiper = new Swiper('.swiper', {
    effect: 'fade',
    speed: 1,
    loop: true,
    autoplay: {
        delay: 5000,
    },
});

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

解説

HTMLはごく普通のSwiperを実装するための最小要素で構成されています。
一番上部の要素にclass=”swiper”、次の要素にclass=”swiper-wrapper”、それぞれのスライド要素にclass=”swiper-slide”のそれぞれのクラスを設定しています。

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="#"></div>
        <div class="swiper-slide"><img src="#"></div>
        <div class="swiper-slide"><img src="#"></div>
    </div>
</div>

続いて、Swiperのコード部分。

const swiper = new Swiper('.swiper', {
    effect: 'fade',
    speed: 1,
    loop: true,
    autoplay: {
        delay: 5000,
    },
});

Swiperの設定もすごくシンプルな構成となっています。

Swiperのオプション指定の中で重要になるのが、speedを1にすること。

speed: 1,

Swiperでマスク効果で切り替えるアニメーションは用意されていないので、アニメーション部分はCSSで実装します。
そのため、Swiper自体の切り替えは一瞬で完了するようにspeedは1にしておきます。

そして、最後にSwiperでマスク切り替えを実現するための最も重要となるCSSの指定。

切り替えはCSSのclip-pathを使用します。

.swiper-slide img{
    transition: clip-path .3s ease-in-out;
}

imgタグにclip-pathの値を0.3秒かけて切り替えるようCSSアニメーションを設定します。

そして、swiperで次に表示されるコンテンツにはclass=”swiper-slide-next”が設定される特徴を利用し、このクラスに以下のCSSが指定されるようにします。

.swiper-slide.swiper-slide-next img{
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}

この指定のおかげで、次に表示されるコンテンツは横幅が0になるため、非表示状態になります。

そして、swiperでアクティブ要素にはclass=”swiper-slide-active”が設定されるので、このクラスには以下のCSSが指定されるようにします。

.swiper-slide.swiper-slide-active img{
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

これにより、次のコンテンツがアクティブ要素になるタイミングで、0.3秒かけて、幅が100%の状態になるため、マスクアニメーションによる切り替えが実現出来ます。

まとめ

いかがでしたか？
Swiperのデフォルト切り替えに無い切り替えアニメーションは、CSSアニメーションを使うことで簡単に実装する事ができます。

最後にもう一度完成コードをご紹介します。
ぜひ、コピペして使用してみてください。

HTMLはこちら。

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="#"></div>
        <div class="swiper-slide"><img src="#"></div>
        <div class="swiper-slide"><img src="#"></div>
    </div>
</div>

続いて、CSSはこちら。

*{
    margin: 0;
    padding: 0;
}
.swiper-slide{
    width: 500px;
    height: 100vh;
}
.swiper-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: clip-path .3s ease-in-out;
}
.swiper-slide.swiper-slide-next img{
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
.swiper-slide.swiper-slide-active img{
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

最後にScriptはこちら。

const swiper = new Swiper('.swiper', {
    effect: 'fade',
    speed: 1,
    loop: true,
    autoplay: {
        delay: 5000,
    },
});

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.