Swiper入門｜使い方・画像スライダーの実装方法も解説

2024-11-17

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

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

Swiperとは？

Swiperの詳細情報はSwiper公式サイトをご覧ください。

Swiperとは、モバイル端末向けに最適化された高性能なスライダーライブラリです。

特に、タッチ操作に対応しているため、スマートフォンやタブレットでのユーザーエクスペリエンスを向上させることができます。

Swiperは軽量でありながら多機能で、画像ギャラリーやバナー、コンテンツのカルーセルなど、さまざまな用途に利用可能です。

使い方や設定も初心者に優しく、HTML、CSS、JavaScriptを使ってすぐに導入できるため、初学者から経験者まで幅広く利用されています。

この記事では、Swiperの導入方法から画像スライダーを簡単に作成する方法を紹介します。

Swiperの主なメリットとデメリット

メリット

パフォーマンスに優れ、特にモバイル向けの最適化が強力
公式ドキュメントが豊富で、柔軟な機能が揃っている
スムーズな無限ループや高度なカスタマイズが可能

デメリット

他の簡易ライブラリよりも設定や構築がやや複雑に感じる場合がある
シンプルなスライダーを求める場合には、設定が多すぎると感じることも

初心者向けから高度なプロジェクトまで柔軟に対応できる点で、Swiperは人気の選択肢です！

以下はSwiperと類似スライダーライブラリの比較をした表です。

スクロールできます

特徴/ライブラリ	Swiper	Slick Slider	Owl Carousel
使いやすさ	やや設定が多いが多機能	比較的シンプルに使える	初期設定がやや簡単
動作のスムーズさ	非常にスムーズで高速	まあまあスムーズ	少し重く感じる場合もある
モバイル対応	強力なモバイル対応	通常の対応が可能	標準的な対応
カスタマイズ性	多機能・細かく設定可能	CSSである程度変更可能	一部簡単だが柔軟性は少し低い
公式サポート	豊富な資料と多くの例あり	情報は安定して多め	少し情報が少なめ

比較を基に、用途や目的に応じて選択するのも◎

Swiperの導入準備

Swiperのインストール方法

Swiperをプロジェクトに組み込む方法はいくつかあります。

それぞれの特徴を見てみましょう！

インストール方法	特徴	使い方の概要
NPM	開発環境に最適、管理が簡単	コマンドでインストールし、JSファイルでインポート
CDN	簡単ですぐに使える	HTMLにリンクを追加するだけで使用可能
ダウンロード	ローカルファイル管理が可能	公式サイトからファイルをダウンロードして自分のプロジェクトに追加

選び方のポイント

NPM：本格的なプロジェクトやモジュール管理を行いたい場合
→ NPMを使うのが最適です。
　柔軟に機能を選び、必要に応じてバージョン管理もできます。
CDN：シンプルなサイトやすぐに使いたい場合
→ CDNを利用する方法が便利です。
　スクリプトをHTMLに挿入するだけで、すぐにSwiperが使えるので初心者にもおすすめです。
ダウンロード：オフライン環境での使用や独自ファイルの管理が必要な場合
→ ダウンロードしてローカルで利用する方法が良いでしょう。
　独自にカスタマイズも容易です。

初心者には、最も手軽に始められるCDNまたはダウンロードする方法をおすすめします。

この記事ではCDNとダウンロードを使った初心者の方でも導入しやすい方法をを紹介します。

方法1：CDN（Content Delivery Network）を使用する方法

CDNを利用する方法は、外部サーバーから直接Swiperのライブラリを読み込む方法です。

簡単で迅速に導入できる
インターネット接続があれば、CDNリンクをコピー＆ペーストするだけで、すぐにSwiperを利用できます。
最新バージョンを自動的に使用
常に最新バージョンが提供されるため、手動で更新する手間がありません。

インターネット接続が必要
CDN経由で読み込むため、ユーザーのブラウザがインターネットに接続されていない場合、Swiperが動作しません。
CDNの遅延やダウン
CDNサービスが一時的に停止したり、遅延が発生した場合、Swiperが正しく読み込めないことがあります。
バージョン管理：最新バージョンに依存するため、古いバージョンを使いたい場合や、特定のバージョンに固定したい場合には不便です。

STEP

Swiperの公式サイトからCDNコードを取得する

Swiper公式サイトをご覧ください。

公式サイトから「Get Started」をクリックして次へ

STEP

Use Swiper from CDNからコードを取得する

※2024年11月時点でのSwiperのCDNバージョンはv11

STEP

①HTMLの<head>タグ内にSwiperのスタイルシートを追加します。

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

STEP

②</body>閉じタグの直前にSwiperのスクリプトを追加します。
自分のJavaScriptファイルよりも手前に貼るようにしてください。

<!-- SwiperのJavaScriptを読み込む -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- 自分のJavaScriptファイルを読み込む -->
<script src="./js/script.js"></script>

STEP

CDN導入：全体像の見本はこちら

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SwiperのCDNを読み込んだ際の基本例</title>
    <!-- SwiperのCSSをCDNで読み込み -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
</head>
<body>
    <!-- Swiperのメインコンテナが入ります。 -->
    

    <!-- SwiperのJavaScriptを読み込む -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <!-- 自分のJavaScriptファイルを読み込む -->
    <script src="./js/script.js"></script>
</body>
</html>

方法2：ダウンロードしてローカルで使用する方法

Swiperのファイルを自分のプロジェクトにダウンロードし、ローカル環境で使用する方法です。

オフライン環境でも使用できる：インターネット接続がなくてもSwiperを使用することができ、安定性が高いです。
バージョンを管理できる：必要なバージョンを自分で選んでダウンロードし、プロジェクト内で管理できます。

手動で更新が必要：Swiperを新しいバージョンにアップデートする際には、手動で新しいファイルをダウンロードして置き換える必要があります。
ファイルの管理：プロジェクト内に必要なファイル（CSS、JS）を適切に配置する必要があり、ファイルの管理やパス設定が必要です。

STEP

Swiperの公式サイトへアクセスして、最新バージョンをダウンロードします。

STEP

ダウンロードファイルの取得

CDNの下にある「Download assets」のURLをクリック

「Download」ボタンをクリックして、Swiperのファイルを含む圧縮ファイル（zip形式）を取得します。

STEP

ダウンロードしたzipファイルを解凍

STEP

swiper-bundle.min.css と swiper-bundle.min.js ファイルを見つけてください。

STEP

CSSとJavaScriptのパス設定

以下の参考コード「path/to/」は実際に保存した正しい場所のパスに変更してください。

❶CSSファイル (swiper-bundle.min.css):

Swiperのスタイルを適用するためのファイルです。スライダーの見た目を整えるために使用されます。

CSSファイルの読み込み：<head>タグ内にCSSファイルを読み込むリンクを記述します。

<head>
    <link rel="stylesheet" href="path/to/swiper-bundle.min.css">
</head>

❷JavaScriptファイル (swiper-bundle.min.js):

Swiperのスライダー機能を動作させるためのJavaScriptファイルです。

スライドの動作やオプション設定を制御します。

JavaScriptファイルの読み込み：ページの最後（通常は</body>タグの直前）でJavaScriptファイルを読み込みます。

<!-- SwiperのJavaScriptファイル -->
  <script src="path/to/swiper-bundle.min.js"></script>
<!-- 自分のJavaScriptファイルを読み込む -->
<script src="path/to/script.js"></script>

STEP

ダウンロード導入：全体像の見本はこちら

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Swiperダウンロードの導入例</title>
  <!-- SwiperのCSSを読み込む -->
  <link rel="stylesheet" href="path/to/swiper-bundle.min.css"> <!-- ここを正しいパスに変更してください -->
</head>
<body>
  <!-- Swiperのメインコンテナが入ります -->
  

  <!-- SwiperのJSを読み込む -->
  <script src="path/to/swiper-bundle.min.js"></script> <!-- ここを正しいパスに変更してください -->
  <!-- 自分のJavaScriptファイルを読み込む -->
  <script src="path/to/script.js"></script>
</body>
</html>

Swiperの基本的な構造

以下のコードは、Swiperの基本的な構造を説明するためのものです。

実際に機能するスライダーを作成するためには、追加のカスタマイズやスタイリングが必要になる場合がありますが、このコードはスライダーの基本的な設定と動作を理解するための出発点として使用できます。

【HTML】Swiperの基本HTML構造

Swiperを実装するためにまず必要なのがHTML構造です。

Swiperの基本的なHTMLは以下のようになります。

<!-- Swiperのメインコンテナ -->
  <div class="swiper">
    <!-- 必須のラッパー -->
    <div class="swiper-wrapper">
      <div class="swiper-slide">スライド1</div>
      <div class="swiper-slide">スライド2</div>
      <div class="swiper-slide">スライド3</div>
    </div>
    <!-- ナビゲーションボタン（必要に応じて） -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <!-- ページネーション（必要に応じて） -->
    <div class="swiper-pagination"></div>
  </div>

このHTML構造では、スライダーを表示するために最低限必要な要素が揃っています。

必須のクラス

.swiper
スライダー全体のコンテナを表すクラスです。これを適用することで、Swiperがスライダー要素を認識し、内部で適切に動作します。

※.swiper クラスは必須ではありませんが、Swiperの初期化時にメインのスライダーコンテナを特定するために使うのが一般的です。
このクラス名自体は変更可能で、別の任意のクラス名を使用しても問題ありませんが、Swiperインスタンスを正しく適用するために、指定するHTML要素が必要です。

.swiper-wrapper
スライドを包むラッパー要素で、スライドがこの中に配置されます。スライドの並びを制御し、動作させる上で必要です。

swiper-slide
各スライド要素に付けるクラスで、これによりSwiperがスライドを認識します。スライダーのコンテンツ（画像やテキストなど）がこのクラスを持つ要素内に配置されます。示するための個別の要素です。

任意のクラス

ナビゲーションボタン：
ライダーを手動で前後に進めるためのボタンを表示します。ナビゲーションが必要な場合にのみ使用できます。
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>

ページネーション（インジケーター）：
現在表示中のスライド位置を示すインジケーターを表示します。

<div class="swiper-pagination"></div>

スクロールバー：
横スクロール用のバーを表示するためのクラスです。必要に応じて追加できます。

<div class="swiper-scrollbar"></div>

【CSS】Swiperのスタイル設定

Swiperのスタイル設定は、スライダーのサイズや外観をカスタマイズするために重要です。

以下のように基本的なスタイルを設定できます。

 /* スライダーのスタイル */
    .swiper {
      width: 100%;
      height: 300px;
    }
    .swiper-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .swiper-button-next,
    .swiper-button-prev {
      color: white;
      background-color: rgba(0, 0, 0, 0.5);
    }

このCSSで、スライダーのサイズやページネーション、ナビゲーションボタンなどの見た目を整えることができます。

【JavaScript】Swiperの初期化と基本設定

最後に、Swiperを動かすためにJavaScriptで初期化を行います。

基本的な初期化コードは以下のようになります。

// Swiperの初期化
    const swiper = new Swiper('.swiper', {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    slidesPerView: 1,
    spaceBetween: 10,
  });

new Swiper('.swiper', {...})
.swiperは、Swiperスライダーを適用したいHTML要素のクラス名です。
この部分で指定したクラスを持つ要素がスライダーとして初期化されます。

{…} 内のオプション
ここで使用しているオプションは次の通りです：

navigationオプション：
nextElは「次へ」ボタンを指定します。この要素がクリックされると、スライドが次に進みます。

prevElは「前へ」ボタンを指定します。この要素がクリックされると、スライドが前に戻ります。

paginationオプション

elはページネーションを表示するための要素を指定します。この要素に対して、ページネーションのナビゲーションが作成されます（例えば、ドット形式で表示されることが多いです）。

clickableはページネーションのドットがクリック可能かどうかを指定します。trueに設定すると、ユーザーがページネーションのドットをクリックすることで、特定のスライドに移動できるようになります。

slidesPerViewオプション

slidesPerView: 1この設定は、1回の表示でいくつのスライドを表示するかを指定します。

spaceBetweenオプション

spaceBetweenは、スライド間の間隔を設定します。

以下は、基本的なHTML構造にスタイルとスライダーオプションを追加したサンプルです。

See the Pen Untitled by Ariii (@ariii-cdp) on CodePen.

Swiperでよく使用されるオプションの一覧表

Swiperは非常に多機能なライブラリで、オプションがたくさん用意されています。

基本的な機能から細かい動作のカスタマイズまで、多種多様な設定が可能です。

以下の表に記載されたオプションは、特に頻繁に使用されるものです。

スクロールできます

パラメータ（オプション名）	説明
loop	スライダーのループを有効化/無効化
slidesPerView	一度に表示するスライドの数を指定
autoplay	スライドを自動で動かす設定
navigation	前後にスライドするためのナビゲーションボタンを表示
pagination	ページネーションを表示し、スライドを示すインジケーターを追加する
effect	スライドの切り替わり方（エフェクト）を設定
spaceBetween	スライド間のスペースをピクセル単位で調整
centeredSlides	アクティブスライドを中央に表示するかを設定
mousewheel	マウスホイールでスライドを操作できるかどうか
keyboard	キーボード操作でスライドを進めるかどうか
grabCursor	スライド中にマウスカーソルを「掴む」状態に変えるか設定します。

Swiperのオプションは非常に多岐にわたりますが、基本的にはスライダーの動作や外観、インタラクションの設定に関連するものが中心です。

たとえば、loopやautoplayはスライドの進行方法に関わる基本的な設定であり、paginationやnavigationはユーザーがスライドを操作するための補助的な機能です。
また、effectやspaceBetweenなどは、ビジュアル的なカスタマイズに関するオプションです。

他にも、breakpointsを使うことで、レスポンシブ対応をカスタマイズしたり、lazyLoadingを使って画像の遅延読み込みを行ったりすることができます。

上記で紹介したオプション以外にも、例えばスライダーの進行方向、アニメーションの速度、スライドの配置方法（縦スクロールや横スクロール）など、さまざまな設定が可能です。公式ドキュメントでは、すべてのオプションについて詳細に説明されており、約20〜30種類のオプションが紹介されています。

シンプルで効果的！3種類のスライダー実装方法

Swiperの基本を押さえたら、さらにカスタマイズを加えて独自のスライダーを作成できます。

これらの実装方法は、簡単にカスタマイズでき、Webデザインやブログ記事などの表示にも役立ちます。

画像スライダー (基本型)

画像を手動で切り替えるシンプルなスライダー。

See the Pen swiper-slider by Ariii (@ariii-cdp) on CodePen.

中央に1枚のみ表示するシンプルなスライダーです。前後のナビゲーションボタンを使って、スライドの切り替えができます。

const swiper = new Swiper('.swiper', {
    slidesPerView: 1, // 中央に1枚のみ表示
    centeredSlides: true, // スライドを中央に配置
    spaceBetween: 10, // スライド間の余白
    loop: true, // ループ機能を有効にする
    navigation: {
      nextEl: '.next',
      prevEl: '.prev',
    },
  });

画像スライダー (複数表示)

一度に複数の画像を表示し、スライドするタイプです。

商品ギャラリーや複数のコンテンツを同時に見せたい場合に便利です。

See the Pen 画像スライダー (複数表示） by Ariii (@ariii-cdp) on CodePen.

複数の画像を並べ、アクティブな画像を中央に表示する設定です。両端にも他の画像が少し見えるようになっています。

const swiper = new Swiper('.swiper', {
    loop: true, // ループ機能を有効にする
    slidesPerView: 1.5, // 一度に表示するスライド数
    spaceBetween: 10, // スライド間の余白
    centeredSlides: true, // アクティブなスライドを中央に配置
    navigation: {
      nextEl: '.next', // 次へボタン
      prevEl: '.prev', // 前へボタン
    },
  });

画像スライダー (自動スライド)

一定間隔でスライドが自動で切り替わるスライダーです。

訪問者が手動で操作しなくても、次々に表示内容を見せることができます。

See the Pen Untitled by Ariii (@ariii-cdp) on CodePen.

自動でスライドが切り替わる設定です。スライドの切り替え速度とページネーションが追加されています。

const swiper = new Swiper('.swiper', {
    slidesPerView: 1, // 一度に表示するスライド数
    spaceBetween: 10, // スライド間の余白
    centeredSlides: true, // アクティブなスライドを中央に配置
    loop: true, // ループ機能を有効にする
    autoplay: {
      delay: 2000, // 自動スライドの間隔（ミリ秒）
      disableOnInteraction: false, // スライドにユーザーが触れても自動スライドを無効にしない
    },
    navigation: {
      nextEl: '.next', // 次へボタン
      prevEl: '.prev', // 前へボタン
    },
    pagination: {
      el: '.swiper-pagination', // ページネーションの要素
      clickable: true, // ページネーションをクリック可能にする
    },
  });

必要に応じて使える各機能

スライダーをより便利にするための追加機能として、ページネーション、ナビゲーションボタン、ブレイクポイントの設定方法を紹介します。

それぞれの設定をシンプルなコード例とともに解説します。

HTML見本サンプル

<!-- スライダーのメインコンテナ -->
<div class="swiper">
  <!-- 必須のラッパー -->
  <div class="swiper-wrapper">
    <!-- スライドの内容 -->
    <div class="swiper-slide"><img src="image1.jpg" alt="Image 1"></div>
    <div class="swiper-slide"><img src="image2.jpg" alt="Image 2"></div>
    <div class="swiper-slide"><img src="image3.jpg" alt="Image 3"></div>
    <div class="swiper-slide"><img src="image4.jpg" alt="Image 4"></div>
    <div class="swiper-slide"><img src="image5.jpg" alt="Image 5"></div>
  </div>

  <!-- 前へボタン -->
  <button class="prev">Prev</button>
  <!-- 次へボタン -->
  <button class="next">Next</button>

  <!-- ページネーション -->
  <div class="swiper-pagination"></div>
</div>

ナビゲーションボタンのカスタマイズ

スライダーに「前へ」や「次へ」のボタンを追加して、ユーザーが画像を手動で切り替える必要がある場合に使用します。

例えば、プロフィール画像のスライダーや製品詳細ページで使うのが効果的です。

<!-- ナビゲーションボタンのHTML -->
<!-- 前へボタン -->
<button class="prev">Prev</button>
<!-- 次へボタン -->
<button class="next">Next</button>

const swiper = new Swiper('.swiper', {
  navigation: {
    nextEl: '.next', // 次へボタン
    prevEl: '.prev', // 前へボタン
  },
});

navigationオプションを使うことで、前後のナビゲーションボタンが有効になります。
nextEl: ‘.next’とprevEl: ‘.prev’で、次と前のボタンを指定します。これにより、ユーザーがボタンをクリックすることでスライドが移動します。

ページネーションのカスタマイズ

サイトにたくさんの画像を表示する際、スライドを区別するためにページネーションが必要です。

例えば、商品ギャラリーや写真のギャラリーに最適です。

<!-- ページネーションのHTML -->
<div class="swiper-pagination"></div>

const swiper = new Swiper('.swiper', {
  pagination: {
    el: '.swiper-pagination', // ページネーションの要素を指定
    clickable: true, // クリックでスライド可能
  },
});

paginationオプションを設定することで、ページネーションが有効になります。
el: ‘.swiper-pagination’でページネーションの要素を指定し、clickable: trueを設定することで、クリックしてスライド間を移動できるようになります。

ブレイクポイント（レスポンシブ設定）の追加

レスポンシブ対応でスライダーを利用したい場合に、画面サイズごとにスライドの数を変更する際に使います。

例えば、スマートフォンでは縦長に1枚だけ表示し、デスクトップでは横に3枚並べて表示するなど、デバイスに合わせたカスタマイズができます。

const swiper = new Swiper('.swiper', {
  breakpoints: {
    // スマートフォン
    480: {
      slidesPerView: 1, // スマートフォンでは1枚表示
    },
    // タブレット
    768: {
      slidesPerView: 2, // タブレットでは2枚表示
    },
    // デスクトップ
    1024: {
      slidesPerView: 3, // デスクトップでは3枚表示
    },
  },
});

breakpointsオプションを使用して、画面サイズに応じたスライダー設定を変更できます。
画面幅が480px以下（スマホ）で表示するスライド数を1に、768px以下（タブレット）で表示するスライド数を2、1024px以上（デスクトップ）で表示するスライド数を3に設定できます。
スライダーが各デバイスに合わせて自動的に調整されます。

これらのコードを必要なときに取り入れれば、スライダー機能をさらに強化し、柔軟なカスタマイズが可能になります。
ページネーション、ナビゲーション、ブレイクポイントなど、目的に応じて適切な機能を選択し、簡単に実装できます。