スライダー実装で迷ったら、結局Swiperに戻ってくる理由

はじめに

「トップページにカルーセルを置きたい」「商品画像をスワイプで切り替えたい」——Web制作をしていると、スライダーの実装依頼は避けて通れません。自作しようとすると、タッチ操作への対応、慣性スクロール、ループ再生、レスポンシブ対応……と考えることが山積みで、気づけば本題そっちのけでスライダーと格闘している、なんて経験はないでしょうか。

そんなときに頼りになるのが Swiper です。10年以上にわたって使われ続け、GitHubスター数は4万を超える、タッチスライダーの定番ライブラリです。この記事では、Swiperの特徴からインストール、基本的な使い方、そして実務でよくあるユースケースまでを、コピペで動くコード例とともに解説します。

説明を読むより先に、実際にスワイプできるSwiperのサンプルを触ってみたい方も多いはずです。

＞＞＞ まずはサンプルを確認 ＜＜＜

Swiperとは

Swiperは、ハードウェアアクセラレーションによる滑らかなトランジションを備えた、モダンなタッチスライダーライブラリです。もともとはモバイルアプリのような操作感をWebで実現するために生まれ、現在はPC・モバイルを問わず幅広いサイトで採用されています。MITライセンスで、執筆時点の最新バージョンはv14系です。

主な特徴

• 依存ライブラリゼロ & モジュール設計 - jQueryなどに依存せず単体で動作します。ナビゲーションやページネーションなどの機能はモジュール化されており、使う分だけ読み込むためツリーシェイキングが効き、バンドルサイズを抑えられます。
• 本格的なタッチ操作 - 指の動きに1:1で追従するスワイプ、慣性、抵抗感など、ネイティブアプリのような操作感を標準で備えています。
• 豊富なエフェクトと機能 - フェード、フリップ、3Dキューブ、カバーフローなどのトランジションに加え、仮想スライド、遅延読み込み、RTL対応、マルチロー（複数行）レイアウトまでカバーします。
• フレームワーク対応 - 素のJavaScriptはもちろん、React・Vue向けの公式コンポーネントと、フレームワークを問わず使えるWeb Components版（Swiper Element）が提供されています。

インストール

npmを使う場合は、次のコマンド一発です。

# npm
npm install swiper

# yarn
yarn add swiper

# pnpm
pnpm add swiper

ビルド環境なしでサッと試したい場合は、CDNも利用できます。

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@14/swiper-bundle.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/swiper@14/swiper-bundle.min.js"></script>

Swiperのサンプルを動かす

まずは実際に手を動かして、Swiperの操作感を確かめてみましょう。下のサンプルはSwiper本体とPaginationモジュールだけを使った最小構成で、カラフルな4枚のスライドをスワイプ（またはドラッグ）で切り替えられます。下部のドットはpaginationオプションで生成されるページネーションで、clickable: trueを指定しているのでドットを直接クリックしても該当スライドへジャンプします。

初期化に必要なのは、.swiper-wrapperの中に.swiper-slideを並べたHTML構造と、new Swiper()にセレクタとオプションを渡すJavaScriptだけです。要点だけ抜き出すと次のようになります。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
  </div>
  <div class="swiper-pagination"></div>
</div>

const swiper = new Swiper('.swiper', {
  loop: true,
  spaceBetween: 16,
  pagination: {
    el: '.swiper-pagination',
    clickable: true, // ドットをクリックしてもスライド移動できるようにする
  },
});

実際に動かせるサンプルが以下です。CDN版のswiper-bundle.min.jsを読み込んでいるので、Swiperクラスはグローバルにそのまま使え、モジュールの個別importも不要です。

loop: trueをfalseに変えると最後のスライドから最初へ戻らなくなり、spaceBetweenの数値を大きくするとスライド間の余白が広がります。コンソールを開いておくと、スワイプやドットクリックのたびにslideChangeイベントで現在のインデックスが出力される様子も確認できます。

基本的な使い方

まずは素のJavaScriptで、ナビゲーション（前後の矢印）とページネーション（下部のドット）付きのスライダーを作ってみましょう。

HTMLはSwiperの決まった構造に従います。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

JavaScript側では、使いたい機能のモジュールを明示的にインポートして初期化します。

import Swiper from 'swiper';
import { Navigation, Pagination } from 'swiper/modules';

// 本体と使用モジュールのCSSだけを読み込む
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

const swiper = new Swiper('.swiper', {
  modules: [Navigation, Pagination],
  loop: true,
  spaceBetween: 20,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

ポイントは、modules に必要な機能だけを渡していることです。全部入りの swiper-bundle を読み込む方法もありますが、モジュール方式ならバンドルに含まれるのは実際に使う機能だけで済みます。

Swiperの最小構成をライブで確認する

Navigation・Paginationのようなモジュールを一切使わない、Swiperの最小構成も見ておきましょう。.swiper-wrapperの中にスライドを並べてnew Swiper()を呼ぶだけで、指でのドラッグ（スワイプ）による切り替えはすでに有効になります。

const swiper = new Swiper('.swiper', {
  slidesPerView: 1,
  spaceBetween: 20,
  centeredSlides: true,
});

矢印もドットも表示されない、正真正銘の最小構成を動かしてみます。

このように、modulesもナビゲーション用のDOM要素も用意せずに、Swiperは最初からタッチ・マウスドラッグでのスライド切り替えに対応しています。矢印やドットが欲しくなったら、ここまでで見てきたNavigation・Paginationモジュールを追加していく、という考え方です。

Reactで使う場合

公式のReactコンポーネントを使うと、宣言的に書けます。

import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination } from 'swiper/modules';

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

export default function MySlider() {
  return (
    <Swiper
      modules={[Navigation, Pagination]}
      spaceBetween={20}
      slidesPerView={1}
      navigation
      pagination={{ clickable: true }}
      onSlideChange={(swiper) => console.log('現在のスライド:', swiper.activeIndex)}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
    </Swiper>
  );
}

オプションがそのままpropsになっているので、素のJavaScript版の知識がほぼそのまま活かせます。Vue向けにも同様の公式コンポーネントが用意されています。

実践的なユースケース

1. 自動再生付きのヒーローカルーセル

トップページの定番、フェードで切り替わる自動再生カルーセルです。

import Swiper from 'swiper';
import { Autoplay, EffectFade, Pagination } from 'swiper/modules';

import 'swiper/css';
import 'swiper/css/effect-fade';
import 'swiper/css/pagination';

const hero = new Swiper('.hero-swiper', {
  modules: [Autoplay, EffectFade, Pagination],
  effect: 'fade',
  loop: true,
  autoplay: {
    delay: 4000,
    disableOnInteraction: false, // 操作後も自動再生を続ける
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

effect: 'fade' を 'coverflow' や 'cube' に変えるだけで、印象の異なる演出に切り替えられます。

2. レスポンシブなカードスライダー

「スマホでは1枚、タブレットで2枚、PCで4枚表示したい」という要望は breakpoints で解決できます。

const cards = new Swiper('.card-swiper', {
  slidesPerView: 1,
  spaceBetween: 16,
  breakpoints: {
    // 画面幅640px以上
    640: {
      slidesPerView: 2,
      spaceBetween: 20,
    },
    // 画面幅1024px以上
    1024: {
      slidesPerView: 4,
      spaceBetween: 24,
    },
  },
});

CSSのメディアクエリと同じ感覚で書けるので、デザインカンプ通りの表示を素直に実現できます。

3. サムネイル連動ギャラリー

ECサイトの商品ページでよく見る、メイン画像とサムネイル一覧が連動するギャラリーです。Thumbs モジュールを使い、2つのSwiperを紐付けます。

import Swiper from 'swiper';
import { Thumbs, FreeMode } from 'swiper/modules';

import 'swiper/css';
import 'swiper/css/free-mode';
import 'swiper/css/thumbs';

// サムネイル側を先に初期化
const thumbs = new Swiper('.thumbs-swiper', {
  modules: [FreeMode],
  slidesPerView: 4,
  spaceBetween: 10,
  freeMode: true,
  watchSlidesProgress: true,
});

// メイン側にサムネイルを紐付け
const main = new Swiper('.main-swiper', {
  modules: [Thumbs],
  thumbs: {
    swiper: thumbs,
  },
});

サムネイルをクリックすればメイン画像が切り替わり、メインをスワイプすればサムネイルの選択状態も追従します。自作するとかなり骨の折れる連動処理が、これだけで完成します。

4. Swiperのナビゲーション矢印で前後移動するスライダー

ドットの操作に慣れていないユーザーもいるため、明示的な「前へ」「次へ」ボタンを置きたい場面は多いです。SwiperのNavigationモジュールは、任意の要素をnextEl・prevElに指定するだけで矢印ボタンとして機能させられます。

const swiper = new Swiper('.swiper', {
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

矢印ボタンをクリックするたびにスライドが切り替わり、現在の位置も表示されるサンプルです。

矢印ボタンの見た目はただの<div>なので、CSSを差し替えれば画像アイコンやテキストボタンにも自由に置き換えられます。nextEl・prevElにはSwiper本体の外側にある要素を指定することもでき、矢印だけをレイアウトの別の場所に配置するといった使い方も可能です。

5. Swiperを自動再生（Autoplay）させるスライダー

トップページのバナーなど、ユーザー操作なしで次々とスライドを送りたい場面ではAutoplayモジュールを使います。delay（ミリ秒）で切り替え間隔を、disableOnInteraction: falseでユーザーが操作したあとも自動再生を継続するかを制御できます。

const swiper = new Swiper('.swiper', {
  loop: true,
  autoplay: {
    delay: 1500,
    disableOnInteraction: false,
  },
});

// swiper.autoplay.stop() / swiper.autoplay.start() で任意のタイミングで停止・再開できる

ボタンで自動再生のON/OFFを切り替えられるサンプルです。swiper.autoplay.stop()とswiper.autoplay.start()を呼び分けています。

delayの値を小さくするほど切り替えが速くなり、大きくするほどゆったりした演出になります。ボタンを押して自動再生を止めたあと、スワイプ操作を試してみると、disableOnInteraction: falseのおかげで手動操作を挟んでも自動再生の設定自体は維持されていることが分かります。

6. Swiperで複数スライドを同時表示する

商品一覧やタグの横並び表示など、1画面に複数枚を同時に見せたいケースは少なくありません。slidesPerViewに2以上の数値を指定するだけで、同時に表示する枚数を制御できます。

const swiper = new Swiper('.swiper', {
  slidesPerView: 3,
  spaceBetween: 12,
});

// 実行時に枚数を変える場合
swiper.params.slidesPerView = 2;
swiper.update();

ボタンでslidesPerViewを1〜4枚に切り替えられるサンプルです。

ボタンを押すたびに同時表示枚数が切り替わる様子を確認できます。実務では、このslidesPerViewの値をbreakpointsオプションと組み合わせ、画面幅ごとに自動で枚数を変える書き方（後述のレスポンシブ対応）がよく使われます。

7. 大量データには仮想スライド

数百枚規模のスライドを扱う場合、全部DOMに展開するとパフォーマンスが悪化します。Virtual モジュールを使えば、表示に必要なスライドだけをレンダリングしてくれます。

import Swiper from 'swiper';
import { Virtual } from 'swiper/modules';

import 'swiper/css';

const slides = Array.from({ length: 500 }, (_, i) => `Slide ${i + 1}`);

const virtualSwiper = new Swiper('.virtual-swiper', {
  modules: [Virtual],
  slidesPerView: 3,
  virtual: {
    slides,
    renderSlide: (slide) => `<div class="swiper-slide">${slide}</div>`,
  },
});

まとめ

Swiperの特徴と使い方を駆け足で紹介しました。

• 依存ゼロのモジュール設計で、使う機能だけをバンドルに含められます
• タッチ操作・ループ・自動再生・レスポンシブなど、スライダーに求められる要件を標準機能で網羅しています
• React・Vue・Web Componentsの公式サポートがあり、どんなプロジェクトにも組み込みやすいです
• サムネイル連動や仮想スライドといった「自作すると大変な機能」もモジュール1つで実現できます

スライダー系のライブラリは数多くありますが、機能の網羅性・ドキュメントの充実度・実績のどれをとっても、Swiperはまず最初に検討すべき選択肢です。公式サイトには豊富なデモが揃っているので、気になるエフェクトを見つけたら、ぜひ今日のコード例をベースに組み込んでみてください。