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

こんにちは、ryohei(@ityryohei)です!

本記事では、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,
    },
});

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

使用パラメータの説明

パラメータ名説明
slidesPerViewauto
Swiperに表示するスライドを枚数を自動で設定する。
freeModetrue
タッチ・ドラッグのスライド操作を受け付ける。(お好みで)
simulateTouchfalse
タッチ・ドラッグのスライド操作を受け付けない。(お好みで)
looptrue
Swiperのスライドをループ表示する。
loopedSlides5
Swiperのスライドをループする際に複製するスライド枚数を指定する。
speed20000
Swiperのスライドの切り替わる時間をミリ秒で指定する。
delay0
オートプレイでスライドが切り替わるまでの待機時間を指定する。
disableOnInteractionfalse
Swiperをユーザーが操作した後にオートプレイが停止しないようにする。
pauseOnMouseEntertrue
Swiperにマウスを乗せるとオートプレイが一時停止する。
※私の環境ではうまく動作しませんでした😓

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

最後に

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

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

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

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら