プログラミングの学習ならUdemyがおすすめです!詳細はこちら

Swiperのオプションを一覧でご紹介します

Swiperのオプションを一覧でご紹介します

疑問くん

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: 1

複数のスライド画像をグループ化する

初期値
number 1

slidesPerGroupは2と設定した時に2枚でワンセットになる。

なのでスワイプした時に、一枚と扱われ二枚スワイプする。

slidesPerViewと組みわせてよく使います。

コード
slidesPerGroup: 1

スライダー画像一枚目センターにして左右に画像を少し出す

初期値
真偽 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,
  },

 

コメントを残す

メールアドレスが公開されることはありません。