【Swiper】カスタマイズ用オプションまとめ一覧

Swiperのカスタマイズ用オプションってどんなのがあるの？

jQuery不要でスライダーを簡単に実装できるプラグインとして有名なSwiperですが、オプションが色々あり、かなり幅広くカスタマイズ可能です。

そこで今回は、Swiperのオプションをまとめてご紹介します。

Swiperの基本的な使い方については、こちらの記事を参照下さい。

じゅんぺいブログは、Web制作（コーディング・WordPress制作）の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください！

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適です。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
（有料になっていたらすいません🙇‍♂️）

＼ 完全無料 ／

ZeroPlus Gate公式サイト

毎日先着制！

Swiperのカスタマイズ用オプションまとめ一覧

早速ですが、Swiperのオプションの一覧をご紹介します。

個人的に良く使う物は赤字、特に良く使う物は太字にしています。

オプション内容については主にSwiper公式サイトのオプションページをDeepLで翻訳したものになり、基本的に使わないオプションも多く含まれています。

大量に書いていますがこれでも全部ではないので、全部知りたい人は公式サイトを参照下さい（書き方も載っています）

基本のオプション

class名のオプション

class名のオプションはいくつかありますが、例として『containerModifierClass』で解説します。

Swiper全体を囲っているdivタグのclass名は、以下になります。

<div class="swiper swiper-initialized swiper-horizontal swiper-pointer-events swiper-backface-hidden">

設定はデフォルトでcontainerModifierClass: 'swiper-'となり、これをcontainerModifierClass: 'test-'とすると以下になります。

<div class="swiper test-initialized test-horizontal test-pointer-events test-backface-hidden">

このように、最初のswiperは変わりませんが、それ以外のclass名の頭を変更可能です。

しかし、class名を変えてしまうと、特に複数人で実装する場合に分からなくなってしまう危険があるので、変更しない方がいいでしょう。

navigation（前へ次への矢印のオプション）

pagination（ドットインジケーターのオプション）

scrollbar（スクロールバーのオプション）

個人的には、スクロールバーは基本的に使いません。

autoplay（自動再生のオプション）

freeMode

これを有効にして勢いよくスワイプやドラッグすると、前後のスライドで止まらずに何枚もスライドします。

あまり使う機会はないと思います。

grid

これは、上下複数行のグリッドスライダーを作る際に使います。

parallax（パララックスのオプション）

エフェクトのオプション

エフェクトのオプションは、エフェクトの種類ごとにあります。

fadeEffect

これはデフォルトだとサイズがバラバラのスライドの場合、スライドが切り替わっても前のスライドが残ってしまいます（パソコンの場合は左上のHTML・CSS・JSをクリックすると見やすいです）

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

以下のように、crossFade: trueにすればちゃんと残らず切り替わります。

const swiper = new Swiper('.swiper', {
  effect: 'fade',
  fadeEffect: {
    crossFade: true
  },
});

coverflowEffect

flipEffect

cubeEffect

cardsEffect

creativeEffect

thumbs（サムネイルのオプション）

サムネイルのオプションの書き方については、以下の記事を参照下さい。

keyboard（キーボード操作のオプション）

有効にすると、キーボードの ← → キーでスライドを操作できるようになります。

mousewheel（マウスホイール操作のオプション）

Swiperのカスタマイズ用オプションの解説

使用頻度が高いオプションの補足をします。

navigation（nextEl・prevEl）

これは、前へ次へのスライドに切り替える矢印を表示するためのオプションで、これがないと表示されません。

これを使えば、前へ次への矢印をCSSや画像にカスタマイズすることも可能です。

pagination（el・clickable）

これは、ドットインジケーターを表示するためのオプションで、"ei"がないと表示されません。

clickableは、ドットクリックすると該当のスライドに切り替わるようにするオプションです。

ドットインジケーター（ページネーション）をカスタマイズすることも可能です。

pagination（type: "fraction"）

ドットインジケーターのデフォルトは『ドット』ですが、functionにするとスライドの総数と現在のスライドが何番目かを表示できます。

autoplay（delay）

これは自動再生時のスライド間の時間で、デフォルトは3000ミリ秒ですが、0にすると常に流れ続ける無限ループスライダーが作れます。

breakpoints

これは設定したブレイクポイント以下で、スライドの表示数を減らしたりするときに使います。

ブレイクポイントを設定してレスポンシブ対応のスライダーが作れます。

設定出来るのはスライドの枚数だけでなく、他のオプションも設定可能です。

effect

これは、スライドの切り替わり方を指定するオプションです。

Swiperのエフェクトのデフォルトは『スライド』ですが、次によく使うのは『フェード』かと思います。

disableOnInteraction

これは、矢印をクリック・ドラッグ・スワイプをすると、自動再生を止めるかどうかを設定するオプションです。

デフォルトだと自動再生にしていても、次への矢印などをクリックしたら自動再生は止まります。

autoHeight

これは、スライドの高さがバラバラの時に自動で高さを調整するオプションです。

デフォルトでは次へ前への矢印の位置が、一番高いスライドの上下中央に固定されてしまいます。

そこで、高さが違う全てのスライドの上下中央に矢印を配置したい場合に、有効にします。

ただし、下のコンテンツも上下に動いて違和感がありまくりなので、使う際には注意しましょう。

まとめ：オプションはよく使うものだけ使えればOK

今回は、Web制作のコーディングで欠かせないスライダー、Swiperのオプションをご紹介しました。

大量にありましたが、全てを理解する必要はないと思うので、よく使う物から使えるようになっていけばOKです。

以上になります。

関連記事slick記事一覧
関連記事Swiper記事一覧
関連記事Splide記事一覧

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！