Swiperとは？特徴とメリットを解説

Swiperは、WebサイトにスライダーやカルーセルUIを実装するためのJavaScriptライブラリです。モダンなデザインのスライダーをサクッと作れると人気で、モバイルにも最適化されています。

Swiperは他のスライダー系ライブラリと比べて様々な特長があります。まず、jQueryに依存せず軽量なのが大きな利点です。最近は脱jQueryの流れもあり、Swiper単体で動作するのは魅力的です。

また、Swiperは非常に多彩なオプションを備えており、思い通りにスライダーをカスタマイズできます。前後の矢印ボタンやページネーション、自動再生やループ、レスポンシブ対応まで、ありとあらゆる設定がオプションで指定可能です。スライダーのエフェクトも、フェードやキューブ、カバーフローなど様々なパターンを選べます。

さらに、充実したAPIドキュメントやデモが公開されているのもSwiperの魅力です。実装方法を詳しく解説したサイトも多数あり、情報が豊富なのも初心者には嬉しいポイントでしょう。

とはいえ、設定できるオプションがありすぎて何から手をつけていいか迷うこともあるかもしれません。しかし、シンプルなスライダーなら最小限のHTMLとJavaScriptでササッと作れますし、オプションを少しずつ覚えていけば、次第に思い通りのスライダーが作れるようになるはずです。

このように、軽量、多機能、情報が豊富で初心者に優しいというのが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オブジェクトを使う古い方式で初期化することになります。

基本的なHTMLの構造

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

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

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

CSSでのスタイル指定

Swiperはデフォルトのスタイルが適用されますが、CSSを追加して自由にカスタマイズ可能です。

スライダーの大きさはswiper要素のwidthとheightで調整します。スライドのレイアウトはFlexboxが使われているので、各スライドのサイズや間隔、配置なども調整できます。ページネーションやボタンのスタイルも、専用のクラスに対してCSSを指定すれば変更できます。

ただしSwiperが動的に付与するクラスもあるので、カスタマイズ時は詳しく動作を確認する必要があります。

JavaScriptでの初期化

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秒）ごとにスライドが切り替わる自動再生のループが完成します。

エフェクトの適用

スライドの切り替わりでフェードイン/アウトしたり、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);
});

イベントを利用する

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を使ったスライダーを実装する方法 | DeLT Web制作Tips
Next.jsにGlide.jsを導入してスライダーを作成する方法を初心者にも分かりやすく解説します。インストールからNext.jsへの組み込み、オプション設定、スタイリングまで、実装に必要な手順を一通り網羅。サンプルコードを交えて丁寧に説明するので、Next.jsでモダンなスライダーを簡単に実現できるようになります。
slick（スリック）の使い方完全ガイド！基本から応用まで丁寧に解説 | 株式会社DeLT
jQueryプラグインのslickは、シンプルな設定でレスポンシブなスライダーが作れる便利なツールです。この記事では、slickの基本的な使い方から、オプションを使ったカスタマイズ、さらには実用的なサンプルコードまでを丁寧に解説します。slickを使いこなして、ユーザーを惹きつけるスライダーを実装しましょう！