Swiperとは？特徴とメリット、基礎的な使い方を解説

Swiperは、Webサイトに美しいスライダーやカルーセルUIを実装するためのJavaScriptライブラリです。初心者でも使い方が簡単で、モダンなデザインのスライダーがサクッと作れると人気があり、モバイル対応も万全です。

Swiperは他のスライダーライブラリと比べて、使い方や機能面で大きな特長があります。まず、jQueryに依存せず軽量なのが最大のメリットです。最近は脱jQueryの流れに加え、ReactやVueなどのモダンなフレームワークでの開発が主流となっており、さらにWordPressのようなCMSでも手軽に導入できるため、様々な開発環境で使いやすいSwiperの使い方は魅力的です。

また、Swiperの基本的な使い方を押さえれば、豊富なオプション機能でスライダーを自由自在にカスタマイズできます。前後の矢印ボタンやページネーション、自動再生やループ、レスポンシブ対応まで、必要な機能をオプションで簡単に実装可能です。スライダーのエフェクトも、フェードやキューブ、カバーフローなど様々なパターンから選べます。

さらに、充実したAPIドキュメントやデモが公開されているのもSwiperの特徴です。具体的な実装方法やカスタマイズの仕方を解説したサイトも多数あり、リファレンスが豊富なのも初心者には心強いポイントでしょう。

設定できるオプションが多すぎて、最初は使い方に戸惑うかもしれません。しかし、基本的なスライダーなら最小限のHTMLとJavaScriptで手軽に実装できますし、オプションの使い方を少しずつマスターしていけば、徐々に思い通りのスライダーが作れるようになります。

このように、軽量で多機能、情報が豊富で初心者にも使いやすいというのがSwiperの魅力です。スライダーの実装方法をお探しの方は、ぜひSwiperの使い方を学んでみてはいかがでしょうか。

Swiperの導入方法

Swiperを使うには、まずはライブラリをプロジェクトに組み込む必要があります。代表的な方法は3つあります。

1つ目は、CDNを利用する方法です。SwiperはCDNを提供しているので、HTMLにリンクを追加するだけで簡単に読み込めます。以下のように、CSS用のリンクをhead内に、JavaScript用のリンクをbodyの終わりに追加します。

html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="<https://unpkg.com/swiper/swiper-bundle.min.css>">
</head>
<body>
  <!-- スライダーのHTML -->

  <script src="<https://unpkg.com/swiper/swiper-bundle.min.js>"></script>
  <script>
    // Swiperの初期化
    var swiper = new Swiper('.swiper', {
      // オプション
    });
  </script>
</body>
</html>

CDNを使うメリットは、簡単に最新版のライブラリが利用できることです。ただし、URLを指定する際はバージョン番号を明記しておくと良いでしょう。バージョンを固定しておけば、アップデートによる予期せぬ動作変更を防げます。

2つ目は、SwiperのファイルをダウンロードしてHTMLから読み込む方法です。公式サイトから必要なCSSとJavaScriptファイルをダウンロードし、自分のサーバーにアップロードして使います。こちらの方法なら、ファイルを自分で管理できるので、バージョンアップのタイミングも制御しやすいというメリットがあります。

3つ目は、npmを使ってインストールする方法です。Node.js環境が必要にはなりますが、バージョン管理や依存関係の解決に長けているのが特徴です。プロジェクトのルートディレクトリで以下のコマンドを実行するだけで、Swiperをインストールできます。

bash
npm install swiper

npmでインストールした場合は、JavaScriptのモジュールバンドラを使ってインポートするのが一般的です。webpack等の環境なら、以下のようにES Modules形式でSwiperをインポートできます。

javascript
import Swiper from 'swiper/bundle';
// 必要に応じてモジュールからインポートも可能
import { Navigation, Pagination } from 'swiper/modules';

const swiper = new Swiper('.swiper', {
  // モジュールを使う場合は modules オプションに指定
  modules: [Navigation, Pagination],
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  pagination: {
    el: '.swiper-pagination',
  },
});

CSSは別途インポートするか、SCSSなどでバンドルすると良いでしょう。

css
import 'swiper/swiper-bundle.min.css';

モジュールバンドラを使わない場合は、バンドル済みのJavaScriptファイルを読み込むか、グローバルなSwiperオブジェクトを使う古い方式で初期化することになります。

Swiperの基本的なHTMLの構造

Swiperのスライダーに必要なHTML要素は基本的に3つです。

  • .swiper：スライダー全体のコンテナ要素
  • .swiper-wrapper：スライドをラップする要素
  • .swiper-slide：各スライド要素

これらのクラスは必須で、これ以外にページネーションや矢印ボタンのための要素も必要に応じて追加します。シンプルなスライダーなら10行程度のHTMLで作れます。

CSSでのスタイル指定とデザインのカスタマイズ方法

Swiperはデフォルトのスタイルが適用されていますが、CSSを使って見た目や動きを自由にカスタマイズできます。スライダーのスタイル調整は、HTMLの基本的な使い方を理解していれば簡単に始められます。

スライダーのサイズ設定は、swiper要素のwidthとheightプロパティで調整します。スライドのレイアウトにはFlexboxが使われているため、各スライドのサイズ調整や間隔の設定、配置の変更も思いのままです。さらに、ページネーションの表示スタイルや矢印ボタンのデザインも、専用のCSSクラスを使って自由にカスタマイズできます。

ただし、Swiperは動作中に動的にクラスを付与する仕組みになっているため、スタイルのカスタマイズ時は実際の表示と動きを確認しながら調整する必要があります。デベロッパーツールを使って、どのようなクラスが適用されているか確認しながら作業を進めるのがおすすめの使い方です。 

JavaScriptでSwiperの初期化

HTMLとCSSの準備ができたら、JavaScriptでSwiperのオブジェクトを作って初期化します。newでオブジェクトを作り、第1引数にはスライダーのセレクタ、第2引数にはオプションを指定します。

javascript
const swiper = new Swiper('.swiper', {
   // オプションを記述
});

シンプルなスライダーなら、これだけのJavaScriptコードで動き出します。本格的に使う際はこちらのコードをベースにループ、自動再生、ページネーション、ボタンなど必要なオプションを追加で指定していきます。

以上のステップを踏めば、Swiperを使ったスライダーの基本的な導入は完了です。プロジェクトの環境に合わせてライブラリの読み込み方を選び、HTMLとCSSでスライダーの枠組みを作り、JavaScriptで動きをつければ、あっという間にスライダーが完成します。

あとはデザインに合わせてCSSをブラッシュアップしたり、用途に応じてオプションを試行錯誤したりと、工夫次第で自由にカスタマイズできるのがSwiperの魅力ですね。ぜひ色んなパターンのスライダーを作ってみてください。

Swiperの主要オプションと使い方

Swiperには多彩なオプションが用意されており、スライダーの動きやレイアウト、見た目をカスタマイズできます。ここでは、初心者でもよく使うオプションについて解説します。

スライドのレイアウトを変更する

スライドのレイアウトを調整するには、以下のオプションが便利です。

  • slidesPerView: 一度に表示するスライド枚数を指定。'auto'にすればCSSでサイズ調整可能。
  • spaceBetween: スライド間の余白（px）を指定。CSSより直感的で便利。
  • breakpoints: 画面幅に応じてオプションを切り替えるためのブレークポイントを設定。

例えば、PCでは3個表示、スマホでは1個表示のレイアウトなら、こんな感じで書けます。

javascript
const swiper = new Swiper('.swiper', {
  slidesPerView: 1,
  spaceBetween: 10,
  breakpoints: {
    600: {
      slidesPerView: 3,
      spaceBetween: 20,
    }
  }
});

600px以上の画面幅ならslidesPerView: 3とspaceBetween: 20が適用され、それ未満ならslidesPerView: 1とspaceBetween: 10になります。パラメータを変えるだけでレスポンシブ対応が簡単にできて便利ですね。

ナビゲーションボタンとページネーションの使い方

スライダーには、「次へ」「前へ」のナビゲーションボタンとページネーションがよくつきます。Swiperなら専用のオプションで簡単に付けられます。

  • navigation: ナビゲーションボタンを表示。nextElとprevElでHTMLの要素を指定。
  • pagination: ページネーションを表示。elでHTMLの要素を、typeで表示タイプを指定。
html
<div class="swiper">
  <div class="swiper-wrapper">
    <!-- スライド -->
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
javascript
const swiper = new Swiper('.swiper', {
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

typeをbulletsからfractionやprogressbarに変えれば、ページネーションの見た目が変わります。ボタンの色や配置は、CSSで自由にカスタマイズできます。

自動再生とループの使い方

スライドを自動で切り替えたり、最後のスライドの次を1枚目に戻したりするのも簡単です。autoplayとloopを使いましょう。

  • autoplay: 自動再生を有効化。ディレイ（ms）なども指定可能。
  • loop: 最後のスライドの次が1枚目に戻る無限ループを有効化。スライドの枚数が少ない場合に便利。
javascript
const swiper = new Swiper('.swiper', {
  loop: true,
  autoplay: {
    delay: 3000,
  },
});

これだけで、3000ミリ秒（3秒）ごとにスライドが切り替わる自動再生のループが完成します。

Swiperで用意されているエフェクトの適用方法

スライドの切り替わりでフェードイン/アウトしたり、3D回転するようなエフェクトも適用できます。effectオプションを使います。

  • effect: スライドのエフェクトを指定。fade、cube、coverflow、flip、creative、cardsから選択。
javascript
const swiper = new Swiper('.swiper', {
  effect: 'fade',
});

たったこれだけで、スライド切り替え時にフェードイン/アウト効果が適用されるようになります。

以上、Swiperの代表的なオプションについて解説しました。組み合わせて使えば、かなり自由にスライダーをカスタマイズできます。

ぜひ色々試してみて、使い勝手の良いスライダーを作ってみてください。もっと詳しいオプション一覧は公式のAPIで確認できます。

Swiperのメソッドやイベントの使い方

Swiperには、スライダーの状態を取得したり、任意のスライドに移動したりするためのメソッドが用意されています。また、スライドが切り替わったタイミングなどで処理を実行するためのイベントもあります。ここではその使い方を見ていきましょう。

スライダーの状態を取得するメソッドの使い方

Swiperには、スライダーの状態を取得するためのメソッドがいくつかあります。例えば、以下のようなメソッドがよく使われます。

  • swiper.slides.length: スライドの総枚数を取得。
  • swiper.activeIndex: 現在アクティブなスライドのインデックス番号（0から始まる）を取得。
  • swiper.realIndex: ループモードを使っている場合の、現在のスライドの実際のインデックス番号を取得。

これらのメソッドを使えば、「スライドが5枚ある」「今3枚目のスライドが表示されている」といった情報を取得できます。

javascript
const swiper = new Swiper('.swiper', {
  // オプション
});

console.log(swiper.slides.length); // スライドの総枚数をコンソールに出力
console.log(swiper.activeIndex); // 現在のアクティブなスライドの番号を出力

任意のスライドに移動するメソッドの使い方

Swiperでは、JavaScriptから任意のスライドに移動するためのメソッドが用意されています。よく使うのは以下の3つです。

  • swiper.slideTo(index, speed, runCallbacks): 指定したインデックス番号のスライドに移動。
  • swiper.slideNext(speed, runCallbacks): 次のスライドに移動。
  • swiper.slidePrev(speed, runCallbacks): 前のスライドに移動。

speedはスライド移動のアニメーション時間（ミリ秒）、runCallbacksはコールバック関数を実行するかどうかの真偽値です。

例えば、「次へ」ボタンを押したら次のスライドに移動し、3秒後に自動的に最初のスライドに戻る、というようなことができます。

javascript
const swiper = new Swiper('.swiper', {
  // オプション
});

document.querySelector('.next-button').addEventListener('click', () => {
  swiper.slideNext(1000); // 次のスライドに1秒かけて移動
  setTimeout(() => {
    swiper.slideTo(0, 500); // 3秒後に0.5秒かけて1枚目のスライドに移動
  }, 3000);
});

イベントを利用するonメソッドの使い方

Swiperでは、スライドが切り替わったタイミングなどで処理を実行するためのイベントが用意されています。イベントには、スライダー初期化時のinit、スライド切り替え前のslideChangeTransitionStart、切り替え後のslideChangeTransitionEndなどがあります。

イベントを利用するには、onメソッドを使います。第1引数にイベント名、第2引数に実行したい処理を関数で指定します。

javascript
const swiper = new Swiper('.swiper', {
  // オプション
  on: {
    init: () => {
      console.log('Swiper初期化完了！');
    },
    slideChangeTransitionStart: () => {
      console.log('スライドの切り替え開始！');
    },
    slideChangeTransitionEnd: () => {
      console.log('スライドの切り替え完了！');
      console.log(`現在のスライドは${swiper.activeIndex + 1}枚目です`);
    },
  },
});

上記のコードでは、スライダー初期化完了時、スライド切り替え開始時、切り替え完了時にそれぞれログを出力しています。切り替え完了時には、activeIndexを使って現在のスライド番号も出力しています。

このように、イベントを利用すれば、スライダーの状態変化に合わせて柔軟に処理を実行できます。アニメーションを追加したり、Ajax通信でデータを取得したりと、アイデア次第で色々な使い方ができるでしょう。

Swiperのメソッドやイベントを使いこなせば、スライダーをもっとインタラクティブにできます。ぜひ色々試して、ユーザーの操作に反応する楽しいスライダーを作ってみてください。

Swiperのよくある使い方の例とカスタマイズ方法

ここからは、Swiperを使った実践的なスライダーの実装方法をご紹介します。サムネイル付きのスライダーやレスポンシブ対応、無限ループのスライダーなど、よくあるパターンのスライダーをSwiperで作る方法を見ていきましょう。

サムネイル付きスライダーを作る

Swiperを使えば、メインのスライダーとサムネイルを連動させたスライダーを簡単に作ることができます。thumbsオプションを使うのがポイントです。

html
<div class="swiper main">
  <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>

<div class="swiper thumbnails">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Thumbnail 1</div>
    <div class="swiper-slide">Thumbnail 2</div>
    <div class="swiper-slide">Thumbnail 3</div>
  </div>
</div>
javascript
const thumbsSwiper = new Swiper('.thumbnails', {
  spaceBetween: 10,
  slidesPerView: 4,
  watchSlidesProgress: true,
});

const mainSwiper = new Swiper('.main', {
  thumbs: {
    swiper: thumbsSwiper,
  },
});

watchSlidesProgressオプションをtrueにしたサムネイル用のSwiperを作り、メインのSwiperのthumbs.swiperオプションにそのインスタンスを渡すだけで、連動するサムネイル付きスライダーの完成です。

サムネイルのスタイルは、CSSでお好みに調整してください。slidesPerViewオプションでサムネイルの表示数も変更できますよ。

レスポンシブ対応で一部の端末のみスライダー表示

スライダーをレスポンシブ対応する際、PCではスライダーにせず、スマホだけスライダー表示したいというケースがあります。Swiperなら、ブレークポイントごとにスライダーを有効化／無効化できるので、そういった実装も簡単です。

javascript
let slider = null;

const initSwiper = () => {
  const screenWidth = window.innerWidth;
  if (screenWidth < 600 && slider == null) {
    slider = new Swiper('.swiper', {
      // オプション
    });
  } else if (screenWidth >= 600 && slider != null) {
    slider.destroy(true, true);
    slider = null;
  }
};

initSwiper();
window.addEventListener('resize', initSwiper);

上記のコードでは、画面幅が600px未満の時だけSwiperを初期化し、600px以上になったらSwiperを破棄するようにしています。resizeイベントでブラウザのリサイズ時にも同様の処理を実行することで、動的にスライダーのオン／オフを切り替えられます。

破棄する際はdestroy(deleteInstance, cleanStyles)メソッドを使います。どちらの引数もtrueにすることで、Swiperのインスタンスを完全に削除し、付与されたCSSも取り除けます。

あとはCSSメディアクエリでスマホ用とPC用のスタイルを切り替えれば、レスポンシブ対応は完璧です。

無限ループで流れるようなスライダー

最後は、スライドが途切れることなく次から次へと流れていくような、無限ループのスライダーを作ってみましょう。loopとautoplay、speedの3つのオプションを組み合わせるのがコツです。

javascript
const swiper = new Swiper('.swiper', {
  loop: true,
  speed: 5000,
  autoplay: {
    delay: 0,
    disableOnInteraction: false,
  },
  slidesPerView: 'auto',
  spaceBetween: 10,
});

loopをtrueにすることで無限ループを有効化し、slidesPerViewを'auto'にしてスライド幅をCSSで調整できるようにします。autoplay.delayを0にすると、スライドが止まることなく流れ続けます。

あとはspeedオプションでスライドの移動速度を遅めに設定すれば、ゆったりとスライドが流れていくような演出ができあがります。disableOnInteractionをfalseにしておけば、ユーザーが操作しても自動再生が止まらないのも便利ですね。

スライドのデザインを凝ったものにすれば、かなり印象的なスライダーに仕上がるはずです。ぜひ色々アレンジを加えてみてください。

いかがでしたか？ Swiperの設定を工夫することで、様々なバリエーションのスライダーが作れるのが分かっていただけたかと思います。

もちろんこれ以外にも、Swiperなら色々なカスタマイズが可能です。ぜひ公式のデモページも見て、面白そうなスライダーを真似してみたり、アイデアを膨らませたりしてみてください。

Swiperのよくあるエラーと対処法

Swiperを使ってスライダーを実装していると、思わぬエラーに遭遇することがあります。ここでは、初心者がよくぶつかるエラーとその原因、対処法をご紹介します。

スライダーが表示されない

Swiperを導入したのに、スライダーが表示されない、というエラーに遭遇したことはありませんか？ よくある原因は以下の2つです。

  1. ファイルパスの間違い
  2. JavaScriptエラー

まずは、Swiperのファイルが正しく読み込めているかを確認しましょう。HTMLで読み込んでいるCSSとJavaScriptのパスが間違っていないか、ファイル名が正しいかをチェックします。

html
<link rel="stylesheet" href="swiper-bundle.min.css">
<script src="swiper-bundle.min.js"></script>

次に、JavaScriptエラーが起きていないかを確認します。ブラウザの開発者ツールのコンソールを開いて、エラーメッセージが出ていないかを見てみましょう。

よくあるエラーとしては、Uncaught TypeError: Swiper is not a constructorというものがあります。これはSwiperのファイルが正しく読み込めていない、または他のJavaScriptファイルとの競合が起きている可能性があります。

ファイルの読み込み順序を見直したり、他のライブラリとのバージョンの組み合わせを変えたりしてみてください。

スタイルが適用されない

スライダーは表示されるけれど、思ったようなスタイルになっていない、というケースもあるでしょう。この場合は、CSSのセレクタやプロパティ指定にミスがある可能性が高いです。

Swiperには、.swiper-containerや.swiper-slideなど、独自のクラス名が付与されます。これらのクラス名を使ってCSSを書く必要がありますが、スペルミスをしていたり、セレクタの指定方法が間違っていたりすると、スタイルが適用されません。

css
.swiper-container {
  width: 100%;
  height: 300px;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
}

CSSの書き方をもう一度見直して、Swiperのクラス名とセレクタがマッチしているかを確認してみてください。

動作がおかしい

スライダーは表示されるし、スタイルも適用されているけれど、思ったように動作しない、というエラーもあります。この場合は、Swiperのオプション指定にミスがある可能性が高いです。

例えば、slidesPerViewオプションに数値ではなく文字列を指定していたり、effectオプションに存在しない値を指定していたりすると、エラーになってしまいます。

javascript
const swiper = new Swiper('.swiper-container', {
  slidesPerView: 3, // 数値で指定する
  effect: 'fade', // 'slide', 'fade', 'cube', 'coverflow', 'flip'のいずれかを指定する
});

また、同じページ内で複数のSwiperを使っている場合、それぞれのオプションが競合していないかも確認しましょう。異なるSwiperで同じクラス名を使っていたり、オプションの設定が重複していたりすると、動作がおかしくなることがあります。

Swiperのオプションをもう一度見直して、正しい値が設定されているか、他のSwiperと競合していないかをチェックしてみてください。

エラー解決の基本は、「可能性のある原因を1つずつ潰していく」ことです。焦らずに、ファイルパスやCSSセレクタ、Swiperオプションなどを1つずつ確認していけば、必ずエラーの原因を特定できるはずです。

どうしてもエラーが解決できない場合は、公式のフォーラムや日本語の情報サイトで検索してみるのも良いでしょう。同じようなエラーで悩んでいる人がきっと見つかるはずです。

他にも以下の記事でまとめてあるライブラリもおすすめですので合わせてご覧ください。

関連の記事
Next.jsでGlide.jsを使ったスライダーを実装する方法
Next.jsフロントエンド
関連の記事
slick（スリック）の使い方とオプション設定の完全ガイド！基本から応用まで丁寧に解説
フロントエンド
関連の記事
React Splideで実現する！スムーズで軽量なスライダーをReactプロジェクトに簡単実装
フロントエンド

DeLT WebInsider編集部

DeLT WebInsider編集部は、Web開発、モバイルアプリ、生成AI、ブロックチェーンなど、先進的なテクノロジー分野における実践的な知見を発信しています。システム開発会社DeLTの実務経験に基づき、最新のWeb技術やプログラミング、企業のWebサイト運営に必要な専門知識、エンジニアのキャリア形成まで、確かな情報をお届けすることで、読者の皆様の業務力向上とキャリアアップをサポートしています。