疑問くん
swiper.jsはどんなオプションがあるのか知りたい！
今回はSwiperのオプションについてご紹介していきます。
Nakaさん
はじめまして！WEB制作会社で働いてるNakaさんです。
Swiper.jsには沢山のオプションが用意されています。
さっそくどんなオプションがあるのか？解説していきます。
Swiperのオプション一覧
今回ご紹介するオプションはSwiper公式サイトに基づいてご紹介していきます。
基本的なオプション
初期化
| 値 | 初期値 |
| 真偽 | true |
インスタンスの作成時にSwiperを自動的に初期化するかどうか？
特に理由がない限りそのままで問題なしです。
init: trueウィンドウサイズ変更時スライドの位置再計算
| 値 | 初期値 |
| 真偽 | true |
updateOnWindowResize: true初期表示のスライドを指定
| 値 | 初期値 |
| number | 0 |
initialSlide: 0スライダーを縦方向に変更する
| 値 | 初期値 |
| direction | ‘horizontal’ |
初期値は横にスライダーするので縦にスライドさせたい時だけ設定します。
direction: 'vertical' スライダーのスピード指定
| 値 | 初期値 |
| number | 300 |
単位はミリ秒です。なので初期値は0.3秒!
speed: 300 slidewrapperの幅をスライド画像の合計幅に変更する
| 値 | 初期値 |
| 真偽 | false |
setWrapperSize: falseスライド画像の幅を強制的に指定する
| 値 | 初期値 |
| 数値 |
width: 1000 スライド画像の高さを強制的に指定する
| 値 | 初期値 |
| 数値 |
height: 500 表示されているスライド画像の高さを自動で調節
| 値 | 初期値 |
| 真偽 | false |
autoheight: true テキストや画像のぼやけを調節してくれる
| 値 | 初期値 |
| 真偽 | false |
roundLengths: true スライドのアニメーションを変更する
| 値 | 初期値 |
| string | ’slide’ |
swiperのアニメーションはfade・cube・coverflow・flipの4種類が用意されています。
effectを変えるだけでアニメーションが変わるのでとても便利です。
effect: 'slide' 前後にスライド画像がない場合ナビゲーションを非表示
| 値 | 初期値 |
| 真偽 | false |
watchOverflowをtrueにすることで前後のスライド画像がない場合ナビゲーションを非表示にしてくれます。
effect: 'slide' スライドグリッド
スライド間に距離をつける
| 値 | 初期値 |
| number | 0 |
spaceBetweenはスライドの間に隙間を作ります。
spaceBetween: 10一画面にスライドの表示枚数設定する
| 値 | 初期値 |
| number | 1 |
slidesPerViewは一画面にスライド画像の表示枚数決めることができるオプションです。
slidesPerView: 3スライダーの列を追加する
| 値 | 初期値 |
| number | 1 |
slidesPerColumnはスライダーを2列または3列にしたりすることができます。
slidesPerView: １複数のスライド画像をグループ化する
| 値 | 初期値 |
| number | 1 |
slidesPerGroupは2と設定した時に2枚でワンセットになる。
なのでスワイプした時に、一枚と扱われ二枚スワイプする。
slidesPerViewと組みわせてよく使います。
slidesPerGroup: １スライダー画像一枚目センターにして左右に画像を少し出す
| 値 | 初期値 |
| 真偽 | false |
centeredSlidesはtrueにすると一枚の画像センターになります。
slidesPerViewと合わせて使うと左右に前後のスライド画像を少し出すことができます。
centeredSlides: trueタッチ関連
スライダーにマウスが乗った時にカーソルを変更する
| 値 | 初期値 |
| 真偽 | false |
grabCursorをtrueにするとカーソルがグローブに変更されます。
スマホには影響なしです。
grabCursor: trueタッチイベントの対象を変更する
| 値 | 初期値 |
| string | ‘container’ |
タッチイベントの対象をcontainerからwrapperに変更することができます。
touchEventsTarget: trueスワイプの加減を調節する
| 値 | 初期値 |
| number | 1 |
touchRatioを設定すれば少しのスワイプで次の画像にスライドします。
数字が大きいほど少しのスワイプでスライドします。
touchRatio: 1スワイプを認識する角度を設定する
| 値 | 初期値 |
| number | 45 |
touchAngle: 45タッチイベントを有効にする
| 値 | 初期値 |
| 真偽 | true |
SimulateTouch: true短いスワイプを無効にする
| 値 | 初期値 |
| 真偽 | true |
短いスワイプを無効にする場合はfalseを設定します。
shortSwipes: false長いスワイプを無効にする
| 値 | 初期値 |
| 真偽 | true |
長いスワイプを無効にする場合はfalseを設定します。
longSwipes: false長いスワイプを無効にする
| 値 | 初期値 |
| 真偽 | true |
長いスワイプを無効にする場合はfalseを設定します。
longSwipes: falseスワイプした時にどのくらい画像が見えてたら次の画像にいくか設定する
| 値 | 初期値 |
| number | 0.5 |
デフォルトの0.5で特に問題ないような気がします。
longSwipesRatio: numberスライダーを操作している時はループを無効化する
| 値 | 初期値 |
| 真偽 | true |
followFingerをfalseにするとスライダーを操作している時はスライダーのアニメーションを無効化します。
followFinger: false自動再生関連
スライダーを自動再生させる
autoplay: {
},
スライダーを自動再生させる時間を設定する
| 値 | 初期値 |
| number | 3000 |
ミリ秒単位で設定します。
3000は3秒です。
autoplay: {
delay: 3000,
},
最後のスライドまでいくと自動再生を止める
| 値 | 初期値 |
| 真偽 | false |
stopOnLastSlideをfalseにすると最後のスライドに到達すると自動再生が止まります。
autoplay: {
stopOnLastSlide: 'false',
},
ユーザーが操作している間でも自動再生を止めない
| 値 | 初期値 |
| 真偽 | true |
disableOnInteractionをfalseにするとユーザーが操作していても自動再生が続きます。
autoplay: {
disableOnInteraction: false,
},
自動再生を逆方向させる
| 値 | 初期値 |
| 真偽 | false |
reverseDirectionをtrueにすると自動再生が逆になります。
autoplay: {
reverseDirection: true,
},
