jQueryが不要でjavascriptのみで動作するスライダーライブラリ swiper.js。
レスポンシブでモバイルにも対応しています。
swiper.js オプション一覧 備忘録
フリーモードとスクロールコンテナ関連(Free Mode and Scroll Container)
| freeMode | boolean | FALSE | TRUE | 各スライド位置の固定 or フリー |
| freeModeFluid | boolean | FALSE | TRUE | スライドからカーソル、タッチを離して もしばらくイージングする or しない |
| scrollContainer | boolean | FALSE | TRUE | true でスクロールエリア化 |
| momentumRatio | number | 1 | 2 | タッチを離した後の跳ね返り値。 v2.0 |
| momentumBounce | boolean | TRUE | FALSE | falseで跳ね返り禁止。 v2.0 |
| momentumBounceRatio | number | 1 | 2 | 跳ね返り効果の値。 v2.0 |
スライドのオフセット（ずらしたりするやつ）関連(Slides offset)
| centeredSlides | boolean | FALSE | TRUE | アクティブなスライドが必ず真ん中にく るようにする。 v2.0 |
| offsetPxBefore | number | 0 | 100 | 一番最初のスライドをオフセット（引っ 込めるとか）したいときに、左の境界線 からの数値（ピクセル単位）を入れる。 v2.0 |
| offsetPxAfter | number | 0 | 100 | 右側のスライドをオフセット（引っ込め るとか）したいときに、右の境界線から の数値（ピクセル単位）を入れる。 v2.0 |
| offsetSlidesBefore | number | 0 | 2 | 左端から何枚目までずらしてスタートさ せるか。レスポンシブでスライドの幅が わからない場合に便利。 v2.0 |
| offsetSlidesAfter | number | 0 | 2 | 右端から何枚目までずらしてスタートさ せるか。レスポンシブでスライドの幅が わからない場合に便利。 v2.0 |
タッチ、マウスの操作関連(Touch/mouse interactions)
| touchRatio | number | 1 | 0.8 | しきい値。どのくらいスワイプしたら次 のスライドに行くかを設定できる。数字 が大きければ少しのスワイプで次に行 く。スライドのサイズに応じて設定した 方がいい。 デフォルトは1。 |
| simulateTouch | boolean | TRUE | FALSE | trueのとき、タッチと同じような動作を マウスでも受け付ける。クリックとかド ラッグでスライドを動かせる。 |
| onlyExternal | boolean | FALSE | TRUE | trueにすると、API機能からしか操作で きなくなる。タブ形式とかで使いやす い。 |
| followFinger | boolean | TRUE | FALSE | falseのとき、タッチを離したときにスラ イドが動く。ホールドしている間はアニ メーションさせないようにできる。 |
| grabCursor | boolean | FALSE | TRUE | trueにしたとき、マウスオンしたときに カーソルが「掴む」マークになる。 ちょっとした気遣いですね。 |
| shortSwipes | boolean | TRUE | FALSE | 短いスワイプをさせたくないときにfalse を設定。 |
| moveStartThreshold | number | FALSE | 100 | Threshold（しきい値）をピクセル単位 での調整ができる。スワイプを動き出さ せるのに、どれくらいのスワイプ動作を 必要とさせるか、という値。”touch distance”がこの値より低いと、動かな い、そうだ。 |
ナビゲーション関連(Navigation)
| keyboardControl | boolean | FALSE | TRUE | キーボードのカーソルキー（矢印）で操 作できるようにするか、しないか。 |
| mousewheelControl | boolean | FALSE | TRUE | マウスホイールでスライドを操作せきる ようにするか、しないか。 |
ページネーション(Pagination)
| pagination | string or HTML Element | – | ‘.my-pagination’ | ページネーションのセレクター名を設定 できる。例では「my-pagination」とい うクラスをページネーションタグに当て られる。もしくはHTML要素をいれても いい。 v2.0 |
| paginationClickable | boolean | FALSE | TRUE | ページネーションボタンをクリックでス ライド操作できるようにさせるか、しな いか。 v2.0 |
| paginationAsRange | boolean | TRUE | trueのとき、ページネーションボタンが 表示スライドと連動するように、Classが あてがわれる。２枚以上を同時表示させ るスライドで効果的。 v2.0 | |
| createPagination | boolean | TRUE | FALSE | trueのとき、ページネーションを作成。 たくさんのspanタグが生成され、各span にswiper-pagination-switchというクラ スがあてがわれ、カレントのスライドに は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-slide active’ v2.0 |
| slideVisibleClass | string | ‘swiper-slide-visible’ | ‘my-visible-slide’ | 表示中のスライドのクラスを指定でき る。デフォルトは’swiper-slide-visible’ v2.0 |
| slideElement | string | ‘div’ | ‘li’ | スライドのタグはデフォルトでdivを使用 しているが、変更可 |
| noSwipingClass | string | ‘swiper-no-swiping’ | ‘stop-swiping’ | noSwipingがtrue前提。ここで指定した クラス名を持ったスライドはスワイプの 操作が効かなくなる。 デフォルトでは’swiper-no-swiping’ |
| paginationElement | string | ‘span’ | ‘div’ | ページネーションのボタンのタグはデフォルトでspan、変更可 |
| paginationElementClass | string | ‘swiper-pagination-switch’ | ‘my-switch’ | ページネーションスウィッチのクラス変 更が可能。 v2.0 |
| paginationActiveClass | string | ‘swiper-active-switch’ | ‘my-active-switch’ | ページネーションのアクティブボタンの クラス変更が可能。 |
| paginationVisibleClass | string | ‘swiper-visible-switch’ | ‘my-visible-switch’ | ページネーションの表示中ボタンのクラ ス変更が可能。 v2.0 |
コールバック関連(Callbacks) ※動作完了時に呼び出す場合とかに
| queueStartCallbacks | boolean | FALSE | TRUE | “true”で”slideChangeStart”を加える。 “slideChangeStart”はmultiple swipes/transitionsをしているときに発生するコールバック v2.0 |
| queueEndCallbacks | boolean | FALSE | TRUE | “true”で”slideChangeEnd”を加える。 “slideChangeStart”はmultiple swipes/transitionsの直後に発生するコー ルバック v2.1 |
| onFirstInit | function | – | function(swiper){ do something } | 最初の初期化の直後に発生するコール バック。functionを書き込むことで実 行 v2.1 |
| onInit | function | – | function(swiper){ do something } | すべての初期化、再初期化の直後に発生 するコールバック。functionを書き込む ことで実行。 v2.1 |
| onTouchStart | function | – | function(swiper){ do something } | タッチしたら発生するコールバック。 functionを書き込むことで実行 |
| onTouchMove | function | – | function(swiper){ do something } | タッチが動いたら発生するコールバッ ク。functionを書き込むことで実行 |
| onTouchEnd | function | – | function(swiper){ do something } | タッチを離したら発生するコールバッ ク。functionを書き込むことで実行 |
| onSlideReset | function | – | function(swiper){ do something } | タッチを離してカレントアクティブスラ イドがリセットされたら発生するコール バック。functionを書き込むことで実 行。フリーモード(freeMode)では無効 |
| onSlideChangeStart | function | – | function(swiper){ do something } | 前後へのスライドが始まったら発生する コールバック。functionを書き込むこと で実行。フリーモード(freeMode)では無 効 |
| onSlideChangeEnd | function | – | function(swiper){ do something } | 前後へのスライドが終わったら発生する コールバック。functionを書き込むこと で実行。フリーモード(freeMode)では無 効。 |
| onSlideClick | function | – | function(swiper){ do something } | スライド上でクリックされたら発生する コールバック。functionを書き込むこと で実行。 |
| onSlideTouch | function | – | function(swiper){ do something } | スライド上でタッチした直後に発生する コールバック。functionを書き込むこと で実行。onTouchStartとほとんど同じだ が、.clickedSlideと.clikedSlideIndex の値を返す。 |
| function(swiper){ alert(swiper.clikedSlideIndex); }とでも したら動くはず。 | ||||
| onImagesReady | function | – | function(swiper){ do something } | 係るすべての画像がロードされたら発生 するコールバック。functionを書き込む ことで実行。”updateOnImagesReady”も trueとするべき。 v2.1 |
| onMomentumBounce | function | – | function(swiper){ do something } | 跳ね返りしたら発生するコールバック。 functionを書き込むことで実行。 v2.1 |
| onResistanceBefore | function | – | function(swiper,p){ do something } | 跳ね返りしている間に発生するコール バック。functionを書き込むことで実 行。pから跳ね返った距離の返り値を得 られる。 v2.0 |
| onResistanceAfter | function | – | function(swiper,p){ do something } | 跳ね返りした後に発生するコールバッ ク。functionを書き込むことで実行。pか ら跳ね返った距離の返り値を得られる。 v2.1 |
