Swiperの無限ループをマスターする！v11での実装方法と注意点

2024-11-20

記事内にプロモーションを含む場合があります。

シロくま

Swiperを使ってスライダーを無限ループさせたいけど、どうしてもうまくいかない…

最近、Swiperを使った無限ループスライダーを作ろうとした際に、スライドが一巡すると一瞬途切れる現象が発生！

私と同様、このような体験をした方も多いのではないでしょうか？

スライドが一巡すると一瞬途切れる現象

See the Pen swiper無限ループしない例 by Ariii (@ariii-cdp) on CodePen.

ワンクリックで目的地へGO！

Swiperの無限ループスライダーとは？

無限ループスライダーとは、スライドが終わった後、最初のスライドに戻って再び表示される仕組みのスライダーです。

このようなスライダーは、ユーザーが操作しなくても、途切れずにコンテンツが流れ続けるため、視覚的にも魅力があり、特にプロモーションや画像ギャラリーなどに利用されています。

例えば、回転寿司のようにスライドが途切れなく流れる動きが理想で、ユーザーがスライダーの端に達してもスムーズに次のスライドが表示されるため、目を引きやすくなります。

一定等速で流れ続ける無限ループスライダーの実装方法

まず、Swiperを無限ループで使用するための基本的な設定を見ていきましょう。

一定等速で流れ続ける無限ループスライダーの実装例

See the Pen swiper無限ループ成功例 by Ariii (@ariii-cdp) on CodePen.

結論：CSSに以下のコードをを追加するだけで、途切れを防ぎ、スムーズな無限ループを実現！

/* スライドの動きを一定にする */
.swiper-wrapper {
  transition-timing-function: linear;
}

このコードをCSSに追加することで、スライダーが一定のスピードで滑らかに動き、途切れることなく無限ループの効果が得られるようになりました！

HTMLのコード

<!-- スライダーのメインコンテナ -->
<div class="swiper">
    <!-- 必須のラッパー -->
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="image_1.jpg" alt="Image 1"></div>
        <div class="swiper-slide"><img src="image_2.jpg" alt="Image 2"></div>
        <div class="swiper-slide"><img src="image_3.jpg" alt="Image 3"></div>
        <div class="swiper-slide"><img src="image_4.jpg" alt="Image 4"></div>
        <div class="swiper-slide"><img src="image_5.jpg" alt="Image 5"></div>
        <div class="swiper-slide"><img src="image_6.jpg" alt="Image 6"></div>
    </div>
</div>

CSSのコード

/* スライダー全体 */
.swiper {
  width: 100%; /* 画面全体に合わせる */
  height: auto; /* 任意の高さ */
  overflow: hidden; /* スライドのはみ出しを隠す */
}

/* スライドの動きを一定にする */
.swiper-wrapper {
  transition-timing-function: linear;
}

/* 各スライドの画像 */
.swiper-slide img {
  width: 100%; /* 画像の幅を100%に */
  height: 100%; /* 高さを100%に */
}

ease や ease-in-out などのデフォルトの動きだと、スライドが開始または終了時に速度が変化し、動きが「止まるように見える」ことがあります。

transition-timing-function: linear;を使うと、スライドの移動が常に一定の速度で進むため、途切れなくスムーズに動作し、無限ループの効果が強調されます。

これは、まるで回転寿司が止まることなく流れるような動きと同じ効果です。

linear は一貫した速度での変化を実現するため、スムーズなアニメーションが必要なシーン（無限ループスライダーなど）に最適です。

JavaScriptのコード

const swiper = new Swiper(".swiper", {
  loop: true, // 無限ループを有効にする
  slidesPerView: 3, // スライドの数を自動調整
  spaceBetween: 10, // スライド間の余白
  speed: 4000, // スライドのスピードを調整
  autoplay: {
    delay: 0, // 途切れない動きを設定
  },
});

loop: true無限ループにするオプション
slidesPerView: 3ここでは3つのスライドが一度に表示されるように設定
spaceBetween: 10スライド間の余白を10ピクセルで設定
speed: 40001回のスライドが移動するのに4秒（4000ミリ秒）かかるように設定
autoplay: { delay: 0 }自動再生する設定。delay: 0 という設定により、スライドの遅延時間がゼロになり、スライドが途切れることなく連続して動き続けます。

Swiperで無限ループスライダーを作る時の注意点

①Swiperライブラリをプロジェクト内に読み込む（CDNを使用）

Swiperを使用するためには、まずライブラリそのものをプロジェクトに読み込む必要があります。

これはCDN（Content Delivery Network）を使うことで簡単に行えます。

以下のスクリプトとスタイルのリンクをHTML内に追加するだけで、Swiperをすぐに使えるようになります。

<!-- SwiperのCSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">

<!-- SwiperのJavaScript -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

CDNを使うと、ファイルをダウンロードする必要がなく、最新バージョンのSwiperを手軽に使用できます。

ありぃ

Swiperライブラリのインストールが初めての方は
以下の記事を参考にしてみてくださいね！

参考にどうぞ

Swiper入門｜使い方・画像スライダーの実装方法も解説 Swiperとは？ Swiper公式サイト引用 Swiperの詳細情報はSwiper公式サイトをご覧ください。 Swiperとは、モバイル端末向けに最適化された高性能なスライダーライブラリで...

②slidesPerView の2倍以上のスライドの枚数を準備する

slidesPerView は画面に同時に表示されるスライドの数を設定するものです。

無限ループを滑らかに動作させるためには、少なくともこの設定値の2倍以上のスライドを用意することが推奨されます。

例えば、slidesPerView: 3 の場合、最低でも6つのスライドが必要になります。
理由: 無限ループをスムーズにするために、スライドが繰り返される際、内容が途切れないようにするためです。
スライド数が少ないと、ループ中に空白が生じたり、動作が不自然に見えることがあります。

③CSSの設定ポイント

transition-timing-function: linear;この設定を使用することで、スライドの移動が一定の速度でスムーズに進みます。

.swiper-wrapper {
  transition-timing-function: linear;
}

overflow: hidden;スライダーの親要素にこのスタイルを設定することで、スライドがスライダーの枠からはみ出さないようにします。

.swiper-container {
  overflow: hidden;
}

④レスポンシブ設定

スライダーがどのデバイス（PC、タブレット、スマホなど）で見ても適切に表示されるようにするために、breakpoints を使用してレスポンシブ設定を行うことができます。これにより、画面サイズごとに表示するスライドの数や間隔を変更できます。

const swiper = new Swiper('.swiper', {
  slidesPerView: 3,
  breakpoints: {
    768: {
      slidesPerView: 2, // タブレットサイズでは2枚表示
    },
    480: {
      slidesPerView: 1, // スマホサイズでは1枚表示
    }
  }
});

各デバイスに適した設定を行うことで、ユーザーがどの画面サイズでもスライダーを快適に閲覧できます。

記事のまとめ

この記事では、Swiperの無限ループスライダーを実装する方法と、注意点について詳しく解説しました。

無限ループスライダーは、スライドが途切れなく流れ続ける特性を持ち、特に視覚的に魅力的なコンテンツを提供するために活用されます。

主に以下のポイントが重要です：

無限ループスライダーの基本的な特徴
無限ループスライダーは、スライドが終わると最初に戻り、途切れることなくスライドが続きます。この特徴により、回転寿司のような流れるような動きを実現できます。
実装に必要なコード
無限ループスライダーを実現するためには、HTML、CSS、JavaScriptの3つの要素を組み合わせる必要があります。
特に、loopオプションや、スライドの間隔やスピードを調整するための設定が重要です。
また、CSSでスライドの動きをスムーズにする設定transition-timing-function: linear;も大切です。
注意すべき点
無限ループスライダーを正常に機能させるためにいくつかの注意点があります。
⚫︎Swiperライブラリをプロジェクトに適切に読み込む
⚫︎表示するスライド数を十分に準備する
⚫︎CSSやレスポンシブ対応