Swiper JS オプション一覧

jQueryが不要でjavascriptのみで動作するスライダーライブラリ swiper.js。

https://swiperjs.com/

レスポンシブでモバイルにも対応しています。

swiper.js オプション一覧 備忘録

フリーモードとスクロールコンテナ関連(Free Mode and Scroll Container) 

freeMode boolean FALSE TRUE各スライド位置の固定 or フリー
freeModeFluid boolean FALSE TRUEスライドからカーソル、タッチを離して もしばらくイージングする or しない
scrollContainer boolean FALSE TRUEtrue でスクロールエリア化
momentumRatio number 2タッチを離した後の跳ね返り値。 v2.0
momentumBounce boolean TRUE FALSE falseで跳ね返り禁止。 v2.0
momentumBounceRatio number 跳ね返り効果の値。 v2.0

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

centeredSlides boolean FALSE TRUEアクティブなスライドが必ず真ん中にく るようにする。 v2.0
offsetPxBefore number 100一番最初のスライドをオフセット(引っ 込めるとか)したいときに、左の境界線 からの数値(ピクセル単位)を入れる。 v2.0
offsetPxAfter number 100右側のスライドをオフセット(引っ込め るとか)したいときに、右の境界線から の数値(ピクセル単位)を入れる。 v2.0
offsetSlidesBefore number 2左端から何枚目までずらしてスタートさ せるか。レスポンシブでスライドの幅が わからない場合に便利。 v2.0
offsetSlidesAfter number 2右端から何枚目までずらしてスタートさ せるか。レスポンシブでスライドの幅が わからない場合に便利。 v2.0

タッチ、マウスの操作関連(Touch/mouse interactions)

touchRatio number 0.8しきい値。どのくらいスワイプしたら次 のスライドに行くかを設定できる。数字 が大きければ少しのスワイプで次に行 く。スライドのサイズに応じて設定した 方がいい。 デフォルトは1。
simulateTouch boolean TRUE FALSEtrueのとき、タッチと同じような動作を マウスでも受け付ける。クリックとかド ラッグでスライドを動かせる。
onlyExternal boolean FALSE TRUEtrueにすると、API機能からしか操作で きなくなる。タブ形式とかで使いやす い。
followFinger boolean TRUE FALSEfalseのとき、タッチを離したときにスラ イドが動く。ホールドしている間はアニ メーションさせないようにできる。
grabCursor boolean FALSE TRUEtrueにしたとき、マウスオンしたときに カーソルが「掴む」マークになる。 ちょっとした気遣いですね。
shortSwipes boolean TRUE FALSE短いスワイプをさせたくないときにfalse を設定。
moveStartThreshold number FALSE 100Threshold(しきい値)をピクセル単位 での調整ができる。スワイプを動き出さ せるのに、どれくらいのスワイプ動作を 必要とさせるか、という値。”touch distance”がこの値より低いと、動かな い、そうだ。

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

keyboardControl boolean FALSE TRUEキーボードのカーソルキー(矢印)で操 作できるようにするか、しないか。
mousewheelControl boolean FALSE TRUEマウスホイールでスライドを操作せきる ようにするか、しないか。

ページネーション(Pagination) 

paginationstring or HTML Element– ‘.my-pagination’ページネーションのセレクター名を設定 できる。例では「my-pagination」とい うクラスをページネーションタグに当て られる。もしくはHTML要素をいれても いい。 v2.0
paginationClickable boolean FALSE TRUEページネーションボタンをクリックでス ライド操作できるようにさせるか、しな いか。 v2.0
paginationAsRange boolean TRUEtrueのとき、ページネーションボタンが 表示スライドと連動するように、Classが あてがわれる。2枚以上を同時表示させ るスライドで効果的。 v2.0
createPagination boolean TRUE FALSEtrueのとき、ページネーションを作成。 たくさんの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

この記事のご感想やコメントはこちら

メールアドレスが公開されることはありません。 が付いている欄は必須項目です