【完全版】Swiperカスタマイズ用オプションまとめ一覧！基本から高度な設定まで網羅

Webサイトにスライダーを実装する際、世界中で最も選ばれているライブラリが「Swiper」です。
結論から言うと、Swiperの真価は豊富に用意された「オプション」による圧倒的なカスタマイズ性の高さにあります。

「画像の表示枚数をスマホとPCで変えたい」「カルーセルを自動再生させたい」「サムネイル画像と連動させたい」といった実務での細かな要望も、オプションを適切に記述するだけで簡単に実現可能です。
この記事では、実務で頻出する「Swiper カスタマイズ用 オプション まとめ 一覧」として、初心者向けの基本設定からプロ向けの高度な機能まで、網羅的に分かりやすく解説します。

コピペしてそのまま使えるコード例も掲載していますので、実装時の辞書代わりに活用して、思い通りのスライダーを構築しましょう。

Swiperのカスタマイズを始める前に：基本の初期化と書き方

Swiperのオプション一覧を見ていく前に、まずはカスタマイズを行うための大前提となる「基本的な記述ルール」をおさらいしておきましょう。
ここを理解していないと、エラーが出たり設定が全く反映されなかったりする原因になります。

Swiperを呼び出す基本のJavaScript

SwiperをWebサイト上で動かすためには、HTMLでスライダーの骨組み（コンテナ、ラッパー、スライド）を作った後、JavaScriptで「この要素をスライダーとして機能させる」という初期化の宣言を行う必要があります。
最も基本的な初期化のコードは以下の通りです。

const swiper = new Swiper('.swiper', {
  // この波括弧の中にオプションを記述していきます
});

「.swiper」の部分は、HTMLで指定した一番外側のコンテナ要素のクラス名と一致させる必要があります。
この「new Swiper」のカッコ内にある波括弧 { } の中に、様々なカスタマイズ用オプションを追記していくのが基本的な流れとなっています。

オプションの記述ルールと注意点

オプションは「プロパティ名: 値」の形式で記述し、複数のオプションを同時に設定する場合はカンマ（,）で区切ります。
値には、数値、文字列、真偽値（true / false）、あるいはオブジェクト（波括弧で囲んだまとまり）など、オプションごとに決められた正しい型を指定しなければなりません。

const swiper = new Swiper('.swiper', {
  direction: 'horizontal', // 文字列はシングルクォーテーション等で囲む
  speed: 500,              // 数値はそのまま記述
  loop: true,              // 真偽値もそのまま記述
});

プロパティ名の大文字・小文字は厳密に区別されます。例えば「slidesPerView」を「slidesperview」と書いてしまうと動作しません（キャメルケースで記述します）。
この記述ルールを守りながら、次にご紹介する多彩なカスタマイズ用オプションを組み合わせていきましょう。

【一覧表】Swiperの必須＆便利カスタマイズオプションまとめ

Swiperには公式ドキュメントを見ると圧倒されるほどのオプションが存在しますが、すべてのプロジェクトで全種類を使うわけではありません。
ここでは、「Swiper カスタマイズ オプション まとめ 一覧」として、これだけは押さえておきたい機能別の早見表を作成しました。

これだけは押さえたい！機能別オプション早見表

以下の表は、実務で頻繁に登場する代表的なオプションを機能ごとに分類した一覧です。
各項目の具体的な記述方法やユースケースについては、後述のセクションで一つずつ丁寧に解説していきます。

機能カテゴリ	オプション名	設定内容の概要
レイアウト・表示	slidesPerView	一度に表示するスライドの枚数を指定する。
	spaceBetween	スライドとスライドの間の余白（px）を指定する。
	centeredSlides	アクティブなスライドを画面の中央に配置する。
	autoHeight	スライドの内容に合わせて高さを自動調整する。
動き・スクロール	loop	スライダーを無限ループさせる。
	speed	スライドが切り替わる際のアニメーション速度。
	freeMode	ピッタリ止めず、慣性で自由にスクロールさせる。
自動再生・演出	autoplay	スライドを自動再生させるための詳細設定を行う。
	effect	フェードや3Dなど、切り替え時のエフェクトを変更。
ナビゲーション	navigation	次へ・前へ進む矢印ボタンを有効にする。
	pagination	現在の位置を示すドット等のナビゲーションを有効にする。
	breakpoints	画面幅（ブレイクポイント）ごとに異なるオプションを適用。

この表にあるオプションを使いこなせるようになれば、世の中のWebサイトで見かけるスライダー表現の大部分は自力で実装できるようになるはずです。

スライドの表示・レイアウトを制御するオプション

スライダーの見た目を大きく左右するのが、画面内に何枚の画像を並べるか、そして画像同士の隙間をどれくらい空けるかというレイアウト設定です。
CSSを複雑にこねくり回すことなく、Swiperのオプションだけで緻密なレイアウト調整が可能になっています。

slidesPerViewで表示するスライド数を設定

slidesPerViewは、スライダーのコンテナ内に一度に表示するスライドの枚数を指定する、最も使用頻度の高いオプションの一つです。
デフォルト値は「1」となっており、1枚のスライドが画面いっぱいに表示されます。

この数値を「3」などに変更するだけで、複数枚の画像が横に並ぶカルーセルレイアウトを簡単に作成可能です。
さらに、「2.5」のように小数点を指定することもできます。端のスライドが半分だけ見切れた状態になるため、スマホ向けのデザインで「まだ横にスクロールできる」ことをユーザーに直感的に伝えやすくなります。

また、「’auto’」を指定すると、CSS側で設定した各スライドの幅（width）に合わせて自動的に表示枚数が計算されます。
画像サイズがバラバラな要素を並べたい時や、画面幅に対してより柔軟なレイアウトを組みたい時に非常に重宝する設定項目です。

spaceBetweenでスライド間の余白を調整

spaceBetweenは、各スライドの間にどれくらいの余白（マージン）を設けるかを指定するオプションです。
単位はピクセル（px）で、数値のみを記述します。初期状態では「0」に設定されているため、スライド同士が隙間なくぴったりとくっついた状態になります。

たとえば、「spaceBetween: 20」と設定すれば、スライドとスライドの間にきっちり20pxの隙間が生まれます。
これにより、窮屈な印象を解消し、デザイン全体にゆとりを持たせることが可能です。

CSSの「margin-right」等を使って手動で余白を調整することも物理的には可能ですが、Swiper内部の幅計算とズレが生じ、最後のスライドが上手く表示されないなどの不具合に繋がるケースが多々あります。
そのため、スライド間の余白調整には、必ずこのspaceBetweenオプションを使用するように心がけましょう。

centeredSlidesでアクティブスライドを中央揃え

centeredSlidesは、現在アクティブになっている（選ばれている）スライドを、画面の左端ではなく中央に配置するためのオプションです。
デフォルトでは「false」となっており、スライドは左詰めで表示されていきます。

これを「true」に変更すると、アクティブなスライドがコンテナのど真ん中に配置され、その左右に前後のスライドが見切れて表示されるような、リッチなデザインを構築できます。
前述の「slidesPerView: 2」や「slidesPerView: ‘auto’」と組み合わせて使用されることが非常に多い人気のカスタマイズ手法です。

メインの画像を強調しつつ、他の画像も控えめに見せたいポートフォリオサイトや、商品のギャラリーセクションなどで大活躍してくれます。

directionで縦方向・横方向のスクロールを指定

directionオプションを使用すると、スライドが動く方向を横（水平）から縦（垂直）に変更することができます。
デフォルト値は「’horizontal’（横方向）」に設定されています。

これを「direction: ‘vertical’」に変更するだけで、上下にスワイプして切り替わる縦型スライダーが完成します。
フルスクリーンのWebサイトでセクションごとに画面を切り替えたい場合や、サイドバーの限られたスペースで新着情報を流したい場合などに非常に有効です。

縦方向にする際の注意点として、スライダーを包むコンテナ要素（.swiper）に対して、CSSで必ず明確な高さ（height）を指定しておく必要があります。
高さが指定されていないと、スライダーが正しく表示されないため忘れずに設定してください。

autoHeightでスライドごとに高さを自動調整

スライダー内に配置するテキストの量や画像の比率がスライドごとに異なる場合、何も設定しないと一番高さのあるスライドに合わせて全体の間延びした余白ができてしまいます。
こんな時に便利なのが、autoHeightオプションです。

「autoHeight: true」と設定すると、現在アクティブになっているスライドのコンテンツ量に合わせて、Swiperコンテナ自体の高さがスムーズに自動調整されるようになります。

const swiper = new Swiper('.swiper', {
  autoHeight: true,
});

FAQ（よくある質問）のセクションをスライダーで表現したい場合や、文字数がバラバラなお客様の声を掲載するカルーセルなどで、無駄な空白をなくしレイアウトを綺麗に保つことができる優れた機能です。

動きと操作感（スワイプ・スクロール）を設定するオプション

スライダーの操作感は、ユーザー体験（UX）に直結する重要な要素です。
Swiperでは、単に画像を切り替えるだけでなく、ループの有無やスクロールの挙動を細かくチューニングすることができます。

loopで途切れない無限ループのカルーセルを作成

loopオプションは、最後のスライドまで到達した後に、再び最初のスライドへ違和感なく繋げるための必須設定です。
デフォルトの「false」のままだと、端まで行くとそれ以上スワイプできなくなってしまいます。

「loop: true」と記述するだけで、エンドレスに回り続ける無限スライダーが完成します。
途切れることなくコンテンツを見せ続けたいトップページのメインビジュアルや、企業ロゴのバナーを横に流し続けるティッカー風の演出などで多用されます。

ただし、loopを有効にすると、Swiperは内部的にスライド要素を複製（クローン）して前後に追加配置する仕様になっています。
そのため、JavaScriptで特定のスライドに対して独自のクリックイベントなどを付与している場合、複製されたスライドにはイベントが効かないことがあるため、実装方法に少し工夫が必要になる点には留意してください。

speedでアニメーションの切り替え速度を調整

speedオプションは、スライドが切り替わる際のアニメーションにかかる時間を設定する項目です。
単位はミリ秒（ms）で指定し、デフォルト値は「300（0.3秒）」となっています。

この数値を大きくするほど、ゆっくりと優雅にスライドが切り替わるようになります。
例えば「speed: 1000」と設定すれば、1秒かけてじわっと次のスライドへ移行するため、高級感のあるブランドサイトや、写真をじっくり見せたいギャラリーに適しています。

逆に、サクサクとテンポよく情報を閲覧させたいECサイトなどでは、少し数値を小さめにしてキビキビとした動きにするのも一つのテクニックです。
サイトのトンマナに合わせて最適な速度を探ってみてください。

slidesPerGroupで複数枚をまとめてスライドさせる

一度に複数のスライドを表示している（slidesPerViewを2以上に設定している）場合、1回のスワイプや矢印クリックで「何枚分進めるか」を指定するのがslidesPerGroupオプションです。
デフォルトは「1」なので、3枚表示していても1枚ずつしかズレていきません。

const swiper = new Swiper('.swiper', {
  slidesPerView: 3,
  slidesPerGroup: 3, // 3枚表示して、3枚ごと一緒に切り替える
});

このように設定すると、現在見えている3枚が、次の3枚へと丸ごと入れ替わるような動きになります。
商品一覧や記事のサムネイル一覧など、グリッドのように整理された情報をページめくりのような感覚で見せたい場合に非常に効果的な設定です。

freeModeで慣性スクロール（フリームーブ）を実装

通常のSwiperは、スワイプ操作をやめると一番近いスライドが「カチッ」と定位置（画面端や中央）に吸い付くように止まります。
しかし、大量の小さな画像をスッと流し見させたい場合、この吸い付く挙動が逆に邪魔になることがあります。

そんな時はfreeModeオプションを有効にします。

const swiper = new Swiper('.swiper', {
  freeMode: true,
});

これをtrueにすると、スライドが定位置で止まることなく、スマートフォンの画面をスクロールする時のように、指の勢いに任せてスルスルと慣性で自由に動かせるようになります。
横長のタイムライン表や、ドラッグ操作をメインとしたUIを構築する際に欠かせない機能です。

allowTouchMoveとgrabCursorでマウス操作を最適化

PCで閲覧しているユーザーに対し、スライダーがドラッグで動かせることを視覚的に伝えるのがgrabCursorオプションです。
「grabCursor: true」に設定すると、スライダーにマウスを乗せた時に、カーソルが「手で掴む（Grab）」アイコンに変化し、直感的な操作を促すことができます。

一方で、デザインの都合上「自動再生だけで見せたい」「矢印ボタンでのみ操作させたい」というケースもあります。
その場合は、「allowTouchMove: false」を設定することで、スワイプやマウスドラッグによる直接的なスライド切り替えを完全に無効化できます。
用途に応じて、ユーザーへの操作権限をコントロールしてみてください。

自動再生とビジュアルエフェクトのオプション

Webサイトにアクセスした瞬間から動きがあることで、ユーザーの目を惹きつけることができます。
自動再生の設定や、目を引くトランジションエフェクトのカスタマイズについて解説します。

autoplayでスライダーの自動再生を詳細に制御

スライダーを自動で動かし続けたい場合は、autoplayオプションを使用します。
単に「true」にするだけでも機能しますが、実務ではオブジェクト形式で詳細なパラメータを設定するのが一般的です。

const swiper = new Swiper('.swiper', {
  autoplay: {
    delay: 3000, // 3秒ごとにスライドを切り替え
    disableOnInteraction: false, // 操作後も自動再生を止めない
  },
});

「delay」では、次のスライドへ切り替わるまでの待機時間をミリ秒単位で指定します（3000なら3秒待ちます）。
さらに重要なのが「disableOnInteraction」です。初期値はtrueになっており、ユーザーが一度でもスワイプしたり矢印ボタンを押したりすると、それ以降ずっと自動再生が停止してしまいます。
一度操作された後も再び自動で動かし続けたい場合は、必ずこの値を「false」に設定しておきましょう。

effectでフェードや3Dなどのトランジションを変更

Swiperでは、スライドが切り替わる際のアニメーション効果（エフェクト）を、effectオプションで簡単に変更できます。
デフォルトは横に滑る「’slide’」ですが、用途に合わせて多彩な表現が最初から内蔵されています。

代表的なものとして、画像がフワッと重なるように切り替わる「’fade’」、立体的な箱が回転するような「’cube’」、AppleのCover Flowのように重なる「’coverflow’」、トランプをめくるような「’cards’」などがあります。

const swiper = new Swiper('.swiper', {
  effect: 'fade',
  fadeEffect: {
    crossFade: true // 前後の重なりを防ぎ、綺麗にフェードさせる
  },
});

フェードエフェクトを使用する場合は、上記のように「crossFade: true」を併用することが推奨されます。これがないと、前の画像の裏に次の画像が透けて見えてしまい、不自然な見た目になることがあります。

ナビゲーションとUIパーツを設置するオプション

ユーザーがスライダーを自分の意思で快適に操作できるようにするためには、分かりやすいナビゲーションUIの配置が不可欠です。
HTMLタグを用意し、オプションで紐付けるだけで様々なUIを呼び出せます。

navigationで次へ・前への矢印ボタンを表示

左右の矢印ボタン（次へ / 前へ）を設置して操作できるようにするのが、navigationオプションの役割です。
HTML側にあらかじめ矢印となる要素（例：divクラス「swiper-button-next」等）を用意しておき、JavaScript側でそのクラス名を指定します。

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

Swiper標準のクラス名を使えば、デフォルトの青い矢印アイコンが表示されます。
色や大きさを変えたい場合、あるいは全くオリジナルの画像アイコンを使いたい場合は、CSSでこれらのクラスのスタイルを上書きするか、独自のクラス名を設定してデザインを完全にカスタマイズすることが可能です。

paginationで現在位置を示すドット（ページネーション）を設置

paginationオプションは、スライダーの下部によくある「丸いドット」のナビゲーションを表示するための設定です。
現在全体のうち何枚目のスライドを見ているのかを、視覚的に伝える役割を持っています。

矢印ボタンと同様に、HTMLに要素を用意し、オプション内で指定します。
ドットをクリックして特定のスライドにジャンプできるようにするには、「clickable: true」という追加設定が必要です。

const swiper = new Swiper('.swiper', {
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

さらに、「type」パラメータを追加することで、見た目をドット（’bullets’）から、現在の枚数/総枚数を示す数字（’fraction’）や、上部に伸びる進捗バー（’progressbar’）に変更することもできます。

scrollbarを追加して直感的な操作性を高める

スライドの総枚数が多い場合や、横長のギャラリーを見せる場合に便利なのがscrollbarオプションです。
ブラウザのスクロールバーのような細いUIを表示し、直感的なドラッグ操作を提供してくれます。

const swiper = new Swiper('.swiper', {
  scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true, // バー自体をドラッグして操作可能にする
  },
});

ページネーションのドットが多すぎて画面がごちゃごちゃしてしまう場合などは、このスクロールバーに切り替えることで、デザインを損なわずスマートな印象を与えることができます。
特にPCユーザーにとってはマウス操作がしやすくなるため、ユーザビリティの向上にも繋がります。

レスポンシブ対応とデバイス別表示の切り替え

現代のWeb制作において、スマートフォン、タブレット、PCなど、異なる画面サイズに対応するレスポンシブデザインは必須条件です。
Swiperには、CSSのメディアクエリに似た機能がオプションとして内蔵されています。

breakpointsを使ったモバイルファーストな画面サイズ設定

breakpointsオプションを使用すると、特定の画面幅（ブレイクポイント）を境にして、Swiperの設定を動的に切り替えることができます。
たとえば、「スマホでは1枚ずつ表示し、PCでは3枚ずつ表示する」といった複雑な要件も、JavaScript内に一箇所にまとめて記述することが可能です。

const swiper = new Swiper('.swiper', {
  // ベースとなる設定（モバイル向け）
  slidesPerView: 1,
  spaceBetween: 10,

  breakpoints: {
    // 画面幅が 768px 以上の場合（タブレット・PC）
    768: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // 画面幅が 1024px 以上の場合（大型PC）
    1024: {
      slidesPerView: 3,
      spaceBetween: 30
    }
  }
});

ここで絶対に覚えておきたい注意点は、Swiperのbreakpointsは「指定したピクセル数『以上』の時に適用される（モバイルファースト仕様）」というルールです。
つまり、ベースとなるオプション（breakpointsの外側）には一番小さなスマホ用の設定を書き、breakpointsの中に大きい画面用の設定を上書きしていく、という書き方を徹底してください。
これを逆にしてしまうと意図した通りに動かなくなります。

実務で役立つ高度なカスタマイズオプション

ここまで紹介した基本機能だけでも十分強力ですが、さらにワンランク上の表現や制御を可能にする、実務向けの高度なオプションをいくつかご紹介します。

thumbsでメインスライダーとサムネイル画像を連動

ECサイトの商品画像ギャラリーなどでよく見かける、「下に並んだ小さなサムネイルをクリックすると、上の大きなメイン画像が切り替わる」というUI。
これを自力で実装しようとするとかなり複雑なJavaScriptが必要ですが、Swiperのthumbsオプションを使えば非常にシンプルに実現できます。

メイン用とサムネイル用の2つのSwiperをHTML上に作成し、メイン側のオプションからサムネイル側のSwiperインスタンスを紐付けるだけです。

// 1. 先にサムネイル用Swiperを初期化
const thumbsSwiper = new Swiper('.swiper-thumbs', {
  slidesPerView: 4,
  freeMode: true,
  watchSlidesProgress: true,
});

// 2. メイン用Swiperでthumbsオプションを指定
const mainSwiper = new Swiper('.swiper-main', {
  thumbs: {
    swiper: thumbsSwiper, // 先に作ったインスタンスを紐付け
  },
});

この設定だけで、双方が完全に連動して動く高度なギャラリー機能が完成します。

イベント（on）を使ってスライド切り替え時に処理を実行

Swiperでは、ユーザーが操作を行ったタイミングなどで発火する様々な「イベント」をキャッチすることができます。
onオプションの中にコールバック関数を記述することで、「スライドが切り替わった瞬間に特定の要素の色を変える」「最後のスライドに到達したらアラートを出す」といった独自の処理を追加できます。

const swiper = new Swiper('.swiper', {
  on: {
    slideChange: function () {
      console.log('スライドが切り替わりました！現在:' + this.activeIndex);
    },
    reachEnd: function () {
      console.log('最後のスライドに到達しました。');
    }
  }
});

他のライブラリ（例えばアニメーションライブラリのGSAPなど）と連携させて、複雑な演出を実装したい場合などに重宝する、開発者向けの強力な機能です。

initialSlideで最初に表示されるスライドを指定

通常、ページを読み込んだ直後に表示されるのは一番最初のスライド（インデックス番号0）です。
しかし、外部から特定のパラメータを受け取った時など、「最初から3枚目のスライドを表示した状態で始めたい」というケースがあります。

そんな時に使うのがinitialSlideオプションです。

const swiper = new Swiper('.swiper', {
  initialSlide: 2, // 3枚目のスライドから開始する（0始まりのため）
});

Swiperは配列と同じように、最初のスライドの番号を「0」として数えます。そのため、3枚目を表示したい場合は「2」を指定することに注意してください。

まとめ：Swiperのオプション一覧を活用して自由自在にカスタマイズ

いかがでしたでしょうか。今回は「Swiper カスタマイズ用 オプション まとめ 一覧」として、Web制作の実務でよく使われる基本設定から、高度な連動機能までを網羅的に解説しました。

表示枚数を変える「slidesPerView」、無限ループの「loop」、レスポンシブ対応の「breakpoints」、そしてサムネイル連動の「thumbs」など、これらのオプションを組み合わせることで、どんな複雑な要件のスライダーでも構築できることがお分かりいただけたかと思います。

最初は設定項目の多さに圧倒されるかもしれませんが、基本の記述ルールは「プロパティ名と値をカンマで繋ぐだけ」というシンプルなものです。
本記事の一覧表やコード例を辞書代わりに活用していただき、ご自身のプロジェクトに合わせて色々な数値を変更し、実際のブラウザで挙動を確認してみてください。オプションの仕様をマスターすれば、Swiperはあなたのフロントエンド開発において欠かせない最強の武器になるはずです。