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

はじめに

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

そんなときに頼りになるのが Swiper です。10年以上にわたって使われ続け、GitHubスター数は4万を超える、タッチスライダーの定番ライブラリです。この記事では、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>

基本的な使い方

まずは素の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 を読み込む方法もありますが、モジュール方式ならバンドルに含まれるのは実際に使う機能だけで済みます。

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. 大量データには仮想スライド

数百枚規模のスライドを扱う場合、全部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>`,
  },
});