swiper.js【オプション一覧】
パラメータ

タイプ

デフォルト値

記入例

speed

数値

300

600

autoplay

数値

5000

-

解説
スライドアニメーション間隔の秒数（ミリ秒）
オートプレイの時の間隔秒数（ミリ秒）。この値がないときはオートプレイしない。

mode

文字列

'horizontal''vertical'

loop

真偽

FALSE

TRUE

loopAdditionalSlides

数値02

horizontallyで水平（横）スライド、verticallyで垂直（縦）スライド。
trueでループ。デフォルトはループしない。
ループの後に、いくつのクローンを用意するかの数値。2.0の新機能
スライドコンテナに何枚表示させたい

数値
slidesPerView

orか。（carousel mode）autoもサポート
14

していて、コンテナの幅によってフィットする。ループと共用できない。

'auto'

2.0の新機能
いくつのスライドでグループ化するか。

slidesPerGroup数値

12

デフォルトは1。carousel modeとの組み合わせで便利。
true にすると、コンテナの高さを計算してスライド毎に高さ設定してくれる。レcalculateHeight

真偽FALSE

TRUE

スポンシブレイアウトや高さが不確定な場合には便利。
2.0の新機能
すべての画像がロードされたあとで初期

updateOnImagesReadybooleanTRUE

FALSE化（構築？）されるようにする。
2.0の新機能

releaseFormElementsboolean

TRUE

FALSE

watchActiveIndexboolean

FALSE

TRUE

フォーム要素を許可するかしないか。
2.0の新機能有効にすると、タッチ操作時にスワイプがactiveIndexを動的に再計算します。
2.0の新機能trueのとき、表示されているスライド

visibilityFullFit

boolean

FALSE

TRUE

で、表示領域を隙間なく埋める。
2.0の新機能
ブラウザのウィンドウサイズによって自autoResize

boolean

TRUE

FALSE

動リサイズをするかしないか。
2.0の新機能resizeReInitboolean

FALSE

TRUE

DOMAnimationboolean

TRUE

FALSE

resistancebooleanor'100%'

TRUE

FALSE

noSwipingboolean

FALSE

TRUE

ウィンドウサイズが変更されるたびに再構築するかしないか。2.0の新機能
custom DOMでのアニメーションをさせるかさせないか。css transitionsができないIE7～9などのため。2.0の新機能
falseで跳ね返り禁止。100%をセットすると無制限に跳ね返る。2.0の新機能
trueにして、"noSwipingClass" をスライドに与えればスワイプできなくなる。
2.0の新機能preventLinks

boolean

TRUE

FALSE

initialSlide

number20

スライド中にクリックがされないようにするかしないか。
先頭スライドを番号で指定する。
falseを設定すると、CSS3でアニメーションさせないようにできる。ただしposition(left:top)を使っての再現になる

useCSS3Transforms

boolean

TRUE

FALSE

ので、クォリティを保つためにパフォーマンスが低下する。ときどきCSS3でうまく動かないデバイスがあったりするので、そのときはfalseにしてみてね。

フリーモードとスクロールコンテナ関連(Free Mode and Scroll Container)
各スライドの位置を固定しないでフリー

freeModeboolean

FALSE

TRUE

freeModeFluid

boolean

FALSE

TRUE

scrollContainer

boolean

FALSE

TRUE

momentumRatio

number12

momentumBounceboolean

TRUE

FALSE

falseで跳ね返り禁止。2.0の新機能

momentumBounceRatio

number12

跳ね返り効果の値。2.0の新機能にするかしないか。
スライドからカーソル、タッチを離してもしばらくイージングするかしないか。
true をセットすると、スクロールエリアみたいな感じで使える。
タッチを離した後の跳ね返り値。 New in
2.0

スライドのオフセット（ずらしたりするやつ）関連(Slides offset)
centeredSlides

boolean

FALSE

TRUE

アクティブなスライドが必ず真ん中にくるようにする。2.0の新機能
一番最初のスライドをオフセット（引っoffsetPxBefore

number0100込めるとか）したいときに、左の境界線からの数値（ピクセル単位）を入れる。
2.0の新機能右側のスライドをオフセット（引っ込めoffsetPxAfter

number0100るとか）したいときに、右の境界線からの数値（ピクセル単位）を入れる。
2.0の新機能
左端から何枚目までずらしてスタートさ

offsetSlidesBefore

number02せるか。レスポンシブでスライドの幅がわからない場合に便利。2.0の新機能
右端から何枚目までずらしてスタートさ

offsetSlidesAfter

number02

せるか。レスポンシブでスライドの幅がわからない場合に便利。2.0の新機能

タッチ、マウスの操作関連(Touch/mouse interactions)
しきい値。どのくらいスワイプしたら次のスライドに行くかを設定できる。数字
touchRatio

number10.8が大きければ少しのスワイプで次に行く。スライドのサイズに応じて設定した方がいい。
デフォルトでは1。
trueのとき、タッチと同じような動作を

simulateTouchboolean

TRUE

FALSE

マウスでも受け付ける。クリックとかドラッグでスライドを動かせる。
trueにすると、API機能からしか操作でonlyExternalboolean

FALSE

TRUEきなくなる。タブ形式とかで使いやすい。
falseのとき、タッチを離したときにスラ

followFinger

boolean

TRUE

FALSE

イドが動く。ホールドしている間はアニメーションさせないようにできる。
trueにしたとき、マウスオンしたときにgrabCursor

boolean

FALSE

TRUE

カーソルが「掴む」マークになる。
ちょっとした気遣いですね。

shortSwipes

boolean

TRUE

FALSE

短いスワイプをさせたくないときにfalseを設定。
Threshold（しきい値）をピクセル単位での調整ができる。スワイプを動き出さ

moveStartThreshold

number

FALSE

100

せるのに、どれくらいのスワイプ動作を必要とさせるか、という値。"touchdistance"がこの値より低いと、動かない、そうだ。

ナビゲーション関連(Navigation)
keyboardControl

boolean

FALSE

TRUE

mousewheelControl

boolean

FALSE

TRUE

キーボードのカーソルキー（矢印）で操作できるようにするか、しないか。
マウスホイールでスライドを操作せきるようにするか、しないか。

ページネーション(Pagination)
ページネーションのセレクター名を設定
pagination

string or HTML
Element

できる。例では「my-pagination」とい-'.my-pagination'

うクラスをページネーションタグに当てられる。もしくはHTML要素をいれてもいい。2.0の新機能
ページネーションボタンをクリックでス

paginationClickableboolean

FALSE

TRUE

ライド操作できるようにさせるか、しないか。2.0の新機能
trueのとき、ページネーションボタンがpaginationAsRange

boolean

表示スライドと連動するように、ClassがTRUEあてがわれる。２枚以上を同時表示させるスライドで効果的。2.0の新機能
trueのとき、ページネーションを作成。
たくさんのspanタグが生成され、各spanにswiper-pagination-switchというクラ

createPaginationboolean

TRUE

FALSE

スがあてがわれ、カレントのスライドにはswiper-active-switchというクラスがあてがわれる。スタイルを当てるのに便利です。

名づけ関連(Namespace)
スワイパーを包んでいる大外のタグのク
wrapperClass

string'swiper-wrapper''my-wrapper'

ラスを指定できる。デフォルトは'swiper-wrapper'。
各スライドのクラスを指定できる。複数slideClass

string'swiper-slide''my-slide'のスライダーを設置していて、違うスタイルを当てたいときなどには便利。デフォルトは'swiper-slide'。
アクティブ中スライドのクラスを指定でslideActiveClass

string'swiper-slide-active''my-active-slide'

きる。デフォルトは'swiper-slideactive'。2.0の新機能
表示中のスライドのクラスを指定でき

slideVisibleClass

string'swiper-slide-visible''my-visible-slide'る。デフォルトは'swiper-slide-visible'。
2.0の新機能
スライドのタグはデフォルトでdivを使用

slideElement

string

'div'

'li'

しているが、変更も可能。例ではliに変えている。
noSwipingがtrue前提。ここで指定したnoSwipingClass

string'swiper-no-swiping''stop-swiping'

クラス名を持ったスライドはスワイプの操作が効かなくなる。
デフォルトでは’swiper-no-swiping’。
ページネーションのボタンのタグはデpaginationElement

string'span''div'

フォルトでspanを使用しているが、変更も可能。例ではdivに変えている。

paginationElementClass

string'swiper-pagination-switch' 'my-switch'paginationActiveClass

string'swiper-active-switch''my-active-switch'paginationVisibleClass

string'swiper-visible-switch''my-visible-switch'

ページネーションスウィッチのクラス変更が可能。2.0の新機能
ページネーションのアクティブボタンのクラス変更が可能。
ページネーションの表示中ボタンのクラス変更が可能。2.0の新機能

コールバック関連(Callbacks) ※動作完了時に呼び出す場合とかに"true"で、"slideChangeStart"を加える。
queueStartCallbacks

boolean

FALSE

TRUE

"slideChangeStart"は、multiple
swipes/transitionsをしているときに発生するコールバック。2.0の新機能"true"で、"slideChangeEnd"を加える。

queueEndCallbacks

boolean

FALSE

TRUE

"slideChangeStart"は、multipleswipes/transitionsの直後に発生するコー
ルバック。2.0の新機能

onFirstInit

onInitonTouchStart
onTouchMove
onTouchEnd

functionfunctionfunctionfunctionfunction---function(swiper){do something }function(swiper){do something }最初の初期化の直後に発生するコールバック。functionを書き込むことで実行。 2.1の新機能
すべての初期化、再初期化の直後に発生するコールバック。functionを書き込むことで実行。2.1の新機能

function(swiper){タッチしたら発生するコールバック。

do something }functionを書き込むことで実行。

function(swiper){

タッチが動いたら発生するコールバッ

do something }ク。functionを書き込むことで実行。

function(swiper){タッチを離したら発生するコールバッ

do something }ク。functionを書き込むことで実行。
タッチを離してカレントアクティブスラ

onSlideResetfunction-function(swiper){

イドがリセットされたら発生するコール

do something }バック。functionを書き込むことで実行。フリーモード(freeMode)では無効。
前後へのスライドが始まったら発生する

onSlideChangeStartfunction-function(swiper){コールバック。functionを書き込むこと

do something }で実行。フリーモード(freeMode)では無効。
前後へのスライドが終わったら発生する

onSlideChangeEndfunction-function(swiper){コールバック。functionを書き込むこと

do something }で実行。フリーモード(freeMode)では無効。

onSlideClickfunction-function(swiper){do something }スライド上でクリックされたら発生するコールバック。functionを書き込むことで実行。
スライド上でタッチした直後に発生するコールバック。functionを書き込むことで実行。onTouchStartとほとんど同じだ

onSlideTouch

function-function(swiper){が、.clickedSlideと.clikedSlideIndex

do something }の値を返す。
function(swiper){alert(swiper.clikedSlideIndex); }とでもしたら動くはず。
係るすべての画像がロードされたら発生

onImagesReadyfunction-function(swiper){するコールバック。functionを書き込む

do something }ことで実行。"updateOnImagesReady"もtrueとするべき。2.0の新機能

onMomentumBounce

function-function(swiper){do something }跳ね返りしたら発生するコールバック。
functionを書き込むことで実行。2.0の新機能
跳ね返りしている間に発生するコール

onResistanceBefore

function-function(swiper,p){ バック。functionを書き込むことで実do something }行。pから跳ね返った距離の返り値を得られる。2.0の新機能
跳ね返りした後に発生するコールバッ

onResistanceAfter

function-function(swiper,p){ ク。functionを書き込むことで実行。pかdo something }ら跳ね返った距離の返り値を得られる。
2.0の新機能