【Swiper】インフィニットスライドを作成する方法

本記事では、Swiperでインフィニットスライドを作成する方法をご紹介しています。インフィニットスライドには有名なライブラリが存在しますが、ここではSwiperを使ってインフィニットスライドを作成してみたいと思います。

では、解説していきます。

本記事で作成するもの

Swiperでインフィニットスライドを作成します。インフィニットスライドとは、スライドが無限にループ表示されるスライドアニメーションを指します。下記にデモを用意しましたので、動作をご確認ください。

See the Pen 7586 by ryohei (@intotheprogram) on CodePen.

上記デモはSwiperを使って作成したものです。Swiperでも問題なく動作していますね。ばっちりです。次項から上記デモで使用しているソースの内容を詳しくご紹介していきます。

Swiperでインフィニットスライドを作成する

Swiperでインフィニットスライドを作成します。Swiperを使うにあたって本体ライブラリが必要になりますので、公式サイトを参考にCDNでライブラリを読み込みます。

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
<!-- JavaScript -->
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

参考：https://swiperjs.com/get-started

HTML

ライブラリの読み込みが完了したら、Swiperのレイアウトに少し追記して、画像を使用したスライダーを作成します。サンプルで使用している画像はLorem Picsumという画像配信サービスを利用しています。コピペでも画像が表示されますので、そのままご利用ください。

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="https://picsum.photos/id/1011/1280/720" alt="">
        </div>
        <div class="swiper-slide">
            <img src="https://picsum.photos/id/1025/1280/720" alt="">
        </div>
        <div class="swiper-slide">
            <img src="https://picsum.photos/id/1039/1280/720" alt="">
        </div>
        <div class="swiper-slide">
            <img src="https://picsum.photos/id/104/1280/720" alt="">
        </div>
        <div class="swiper-slide">
            <img src="https://picsum.photos/id/110/1280/720" alt="">
        </div>
    </div>
</div>

CSS

上記のHTMLにCSSでスタイルを定義します。Swiperにはデフォルトでイージング（スライダーの加速度）が設定されています。デフォルトではease-outというイージングが指定されているため、下記のCSSでイージングを上書きします。イージングには好みがありますので、適宜修正していただければと思います。

.swiper-wrapper {
    //ループ時のアニメーションの緩急を一定にする（デフォルトはease-out）
    transition-timing-function: linear;
}

JavaScript

最後にJavaScriptでSwiperを初期化します。ここではインフィニットスライドの実装に役立ちそうなパラメータを追加しています。コメントアウトで無効化している行につきましては、必要であれば有効化してご利用ください。

const swiper = new Swiper('.swiper', {
    slidesPerView: 'auto',
    // freeMode: true,
    // simulateTouch: false,
    loop: true,
    loopedSlides: 5,
    speed: 20000, 
    autoplay: {
        delay: 0,
        // disableOnInteraction: false,
        // pauseOnMouseEnter: true,
    },
});

上記で指定しているパラメータは下記の通りです。

使用パラメータの説明

パラメータ名	説明
slidesPerView	auto Swiperに表示するスライドを枚数を自動で設定する。
freeMode	true タッチ・ドラッグのスライド操作を受け付ける。（お好みで）
simulateTouch	false タッチ・ドラッグのスライド操作を受け付けない。（お好みで）
loop	true Swiperのスライドをループ表示する。
loopedSlides	5 Swiperのスライドをループする際に複製するスライド枚数を指定する。
speed	20000 Swiperのスライドの切り替わる時間をミリ秒で指定する。
delay	0 オートプレイでスライドが切り替わるまでの待機時間を指定する。
disableOnInteraction	false Swiperをユーザーが操作した後にオートプレイが停止しないようにする。
pauseOnMouseEnter	true Swiperにマウスを乗せるとオートプレイが一時停止する。 ※私の環境ではうまく動作しませんでした?

これでSwiperでインフィニットスライドを作成することができます。

最後に

Swiperには本記事でご紹介したパラメータの他に、魅力的なパラメータが数多く用意されており、簡単なものから複雑なものまで、条件を満たしたスライダーを簡単に作成することができます。扱いに慣れるまでにある程度の時間が必要ですが、少しずつ触って、動かして、自分の手で好みのスライダーを作ってみてくださいね。

参考：https://swiperjs.com/swiper-api

以上、Swiperでインフィニットスライドを作成する方法のご紹介でした！