Swiperで無限ループスライダーを作る方法｜v11対応の実装と注意点まとめ

2024-11-202025-09-07

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

シロくま

Swiperでスライダーを無限ループさせたいけど、どうしても一瞬途切れてしまうんです…

実はこれ、私も最初にハマったポイントでした。
スライドが一巡した瞬間に「ピタッ」と止まったように見えてしまい、思っていた“途切れない流れ”にならなかったんです。

最初は「私のコードが間違ってるのかな？」と何度も見直して悩みました…

同じように困っている方のために、この記事では Swiper v11で無限ループスライダーを滑らかに実装する方法 と、やっておきたい注意点をまとめて紹介します。

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

以下のデモを見てもらうと分かるのですが、スライダーがループの切り替えポイントで一瞬カクッと途切れてしまっています。これが多くの方が最初にぶつかる「Swiper無限ループの落とし穴」です。

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

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

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

無限ループスライダーとは、スライドが最後まで進んでも自動的に最初へ戻り、途切れずに繰り返し表示される仕組みのことです。

この仕組みを使うと、ユーザーが操作しなくてもコンテンツがずっと流れ続けるため、サイトに動きと華やかさを加えることができます。

よく使われる場面はこんなケースです

プロモーションバナー
画像ギャラリー
サービス紹介

無限ループのスライダーは実務でもよく使われる定番のパターンなので、しっかり押さえておきたいポイントです！

イメージとしては「回転寿司のレーン」。お皿が途切れなく流れてくるように、スライダーも止まることなく進んでいくのが理想です。ユーザーがスライダーの端まで見ても、そのまま自然に次のスライドが現れるので、視線を引きつけやすくなります。

無限ループスライダーを実装する方法

ここからは実際に、Swiperで無限ループスライダーを作る手順を見ていきましょう。
ポイントは「CSS・HTML・JavaScriptを組み合わせて、途切れのない動きを作ること」です。

1. CSSで「一定速度」にするのがコツ

loop: true を設定すれば無限ループ自体は有効になります。
でもそのままだと、スライドが一巡するタイミングで「カクッ」と止まったように見えてしまうんです。

ありぃ

最初にこれに気づいたときは、「あれ？ちゃんと loop:true にしてるのに…」とかなり悩みました

その解決策がこちら

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

この1行をCSSに追加するだけで、スライドが止まらずに流れ続けるようになります。
結果として、理想的な「途切れない無限ループスライダー」を実現できます。

実際のデモはこちら

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

2. 基本のHTML

まずはスライダーの土台となるHTMLです。
構造としては「メインコンテナ → wrapper → slide」が必須になります。

<!-- スライダーのメインコンテナ -->
<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>

3. 基本のCSS

次にデザインと動きの調整です。

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

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

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

ここで重要なのが transition-timing-function: linear;。
デフォルトの ease や ease-in-out だと、動きの最初や最後に減速してしまい「止まったように見える」んです。

linearにすることで常に一定速度で流れるため、回転寿司のレーンのように滑らかな連続感が生まれます。

4. JavaScriptの設定

最後にSwiper本体の動きを設定します。

const swiper = new Swiper(".swiper", {
  loop: true,           // 無限ループ
  slidesPerView: 3,     // 同時に表示するスライド数
  spaceBetween: 10,     // スライド間の余白
  speed: 4000,          // 移動速度（ms）
  autoplay: {
    delay: 0,           // 途切れない動きに必須
  },
});

それぞれの設定の意味はこんな感じ👇

loop: true → 無限ループを有効化
slidesPerView: 3 → 画面に同時表示するスライド数
spaceBetween: 10 → スライド間の余白を10pxに設定
speed: 4000 → 1スライドが4秒で移動（スピード調整可能）
autoplay.delay: 0 → 遅延なしで途切れずに流れる

無限ループスライダーを実装するときの注意点

無限ループスライダーは見た目が華やかで便利ですが、正しく設定しないと「途切れる」「崩れる」といったトラブルが起きやすいです。
ここでは私自身も最初につまずいたポイントを交えて、注意すべきポイントを整理しました。

①Swiperライブラリを読み込む（CDNを使用）

まずはSwiper本体を読み込む必要があります。
一番簡単なのはCDNを使う方法です。HTMLに以下のコードを追加するだけでOK。

<!-- 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の使い方入門｜CDNで簡単導入＆画像スライダーの作り方 Swiper v11の導入から画像スライダーの実装までを初心者向けに解説。CDNで簡単導入し、HTMLとJSだけでサクッと動くスライダーを作ってみましょう。

②slidesPerViewの2倍以上のスライドを用意

slidesPerView は「一度に表示するスライドの数」を決めるプロパティです。

ここで重要なのが、必ず設定値の2倍以上のスライドを用意すること。

例：

slidesPerView: 3 → 最低6枚のスライドが必要

なぜかというと、スライドが少ないとループの切り替えで「空白」が出たり、動きが不自然になってしまうからです。

③CSSの設定も忘れずに

スライダーをスムーズに動かすためには、CSS側の設定もポイントです。

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

/* 枠からはみ出さないようにする */
.swiper-container {
  overflow: hidden;
}

特に transition-timing-function: linear; は必須。
デフォルトの ease だと動きが加速・減速して「一瞬止まったように見える」ので、linearで等速にするのがコツです。

④レスポンシブ対応（breakpoints）

最後に忘れちゃいけないのがレスポンシブ対応。
PC・タブレット・スマホなど画面幅ごとにスライド数を切り替えましょう。

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

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