Swiper
オプション一覧
パラメータ
| パラメータ | デフォルト値 | 説明 |
|---|---|---|
| allowTouchMove | true | false：ドラッグ（スワイプ）でのスライド切り替えを無効にする |
| autoplay | ||
| { | ||
| delay | 3000 | 次のスライドに切り替わるまでの時間を指定（ミリ秒） data-swiper-autoplay 属性を利用して、HTML側で個別に値を指定することも可能 |
| disableOnInteraction | true | true：ユーザーが操作したときに自動再生を止める false にしておくのがお勧め |
| reverseDirection | false | 自動再生の進行方向を逆にする |
| waitForTransition | true | true：スライド切り替えのアニメーションの間は自動再生を止める true だと1枚目のスライドだけ表示時間が短くなるため、表示時間を揃えたいなら false にするのがお勧め |
| } | ||
| breakpoints | ブレークポイントごとにパラメータを変更する
|
|
| centeredSlides | false | true：アクティブなスライドが中央に来るようにする |
| direction | 'horizontal' | 'vertical'：スライド方向を垂直方向にする |
| effect | 'slide' | エフェクトのタイプを指定 |
| fadeEffect | ※ effect:'fade' のときのみ | |
| { | ||
| crossFade | false | true：スライドのクロスフェードを有効にする 下のコンテンツが重なって出てしまわないように true がお勧め |
| } | ||
| followFinger | true | true：ドラッグ（スワイプ）と連動してスライダーが動き、前後のスライドが見えてくるようにする false：ドラッグ（スワイプ）中はスライダーを動かさない アクティブなスライドにCSSアニメーションを適用するケースなどでは false のほうがお勧め |
| freeMode | false | true：自由にドラッグ（スワイプ）できるようにする スライド位置がスナップしなくなる 下の詳細設定が必要なければ freeMode: true だけでOK |
| { | ||
| enabled | true：自由にドラッグ（スワイプ）できるようにする スライド位置がスナップしなくなる |
|
| momentum | true | false：ドラッグ（スワイプ）した後の慣性スクロールをオフにする |
| } | ||
| grabCursor | false | true：PCでホバー時にマウスカーソルを「掴む」マークにする |
| loop | false | true：無限ループさせる |
| loopAdditionalSlides | 0 | ※ loop: true のときのみ 複製するスライド数を指定 0 だとループが滑らかに繋がらないことがあるため 1 以上がお勧め |
| mousewheel | true：マウスホイールによるスライド切り替えを有効にする 下の詳細設定が必要なければ mousewheel: true だけでOK |
|
| { | ||
| forceToAxis | false | true：スライド方向とスクロール方向が一致しているときだけ有効にする 水平方向のスライダーなら水平方向のスクロールのみ、 垂直方向のスライダーなら垂直方向のスクロールのみ可能となる |
| invert | false | true：スクロール方向とスライドの動く向きを逆にする |
| } | ||
| nested | false | true：スライダーを入れ子にしているときにタッチイベントを正しく取得する 親子のスライド方向が同じ場合のみ使用 |
| pagination | ||
| { | ||
| clickable | false | true：クリックでのスライド切り替えを有効にする 押せそうなデザインなら true にしておくのがお勧め |
| type | 'bullets' | 表示タイプを指定 ‘bullets’：スライド枚数分のドットが作られる ‘fraction’：分数で表示する（例：1 / 10） ‘progressbar’：スライドの進捗に応じてバーが伸びていく ‘custom’：出力内容をカスタマイズ renderCustom で書式設定が必要 |
| renderBullet | ※ type:'bullets' のときのみ 出力内容を指定 ＜ 01、02…とスライド番号を入れたい場合の例 ＞
|
|
| renderCustom | ※ type: ‘custom’ のときのみ 出力内容を指定 | |
| } | ||
| roundLengths | false | true：スライドの横幅・高さの小数点以下を四捨五入して、中の画像や文字がぼやけないようにする |
| slideToClickedSlide | false | true：クリックしたスライドに移動させる（アクティブにする） |
| slidesPerView | 1 | 表示させるスライドの枚数を指定 指定した枚数分がコンテナ内に収まるように調整される 小数点以下の値も指定可能（ 1.5 など） CSSでサイズ調整したい場合は ‘auto’ を指定 |
| spaceBetween | 0 | スライド間の余白を指定（px） CSSで margin を付けるとスライドの位置がずれていくことがあるため、こちらで指定するのが推奨 |
| speed | 300 | スライド切り替えのアニメーションのスピードを指定（ミリ秒） |
| { | ||
| swiper | null | サムネイルのスライダーと連動させる場合、 サムネイルのスライダーのSwiperインスタンス名を指定 |
| } | ||
| watchSlidesProgress | false | true：各スライドの進捗状況を監視する 表示状態のスライドに .swiper-slide-visible のクラスが付くようになる |
プロパティ
| プロパティ | 説明 |
|---|---|
| swiper.activeIndex | アクティブなスライドのインデックス番号を取得 |
| swiper.realIndex | アクティブなスライドのインデックス番号を取得 ※ループモードの場合は .activeIndex ではなくこちらを使用 |
| swiper.params | 初期化時のパラメータの値を取得 例：mySwiper.params.speed |
メソッド
| プロパティ | 説明 |
|---|---|
| swiper.destroy(deleteInstance,cleanStyles) | スライダーを無効化する deleteInstance：インスタンスを削除するかどうか（boolean）｜デフォルトは true cleanStyles：スライダー要素の不要なスタイルを削除するかどうか（boolean）｜デフォルトは true |
| swiper.getTranslate() | スライダーの現在の translate の値を取得。 |
| swiper.setTranslate(translate) | スライダーの translate の値を書き換える。 |
| swiper.slideTo(index,speed, runCallbacks) | 指定したインデックス番号のスライドへ移動。 |
| swiper.slideToLoop(index,speed, runCallbacks) | 指定したインデックス番号のスライドへ移動 ※ループモードの場合は slideTo() ではなくこちらを使用 |