swiper.js使ってみたからそのオプションについて

a0002_011891_m
ちょっと機会があって、swiper.js使ったからその時のメモ。
本当は単語ごとにスムーススクロールとか設置した方がいいんだろうけど、めんどく(
ブラウザの検索機能を使ってくだしあ。
ちょくちょく間違ってる可能性があるから、間違ってる箇所があったら教えていただければ気まぐれで修正します。
あと、例が欲しいところがあれば気まぐれで追記します。

swiper.jsってなんぞ?

swiper.jsのダウンロードサイト

簡単に言うと、スライダー系のJS。オプションが多く、個人的にはbxsliderとslickとflexと合わせて神スライダー四天王として認識してる。
このswiper.jsのメリットデメリットはこんな感じ
メリット

  • オプションが非常に多い。前に記事したbxsliderより多い。コールバック関数(タッチ、クリックなどをした時に関数を実行するもの)の数が特に多い。
  • jQueryが不要。なんだかんだプラグインの多くはjQueryが必要になることが多いけど、これは不要。サイトの仕様によっては非常にありがたい。
  • スマホにも対応。タッチ、スワイプ、タップにも反応してくれる。
  • 特定のボタンを押した時に、特定のスライドに移動するとかそういうのが非常に簡単にできる。

デメリット

  • 最新版のサポートはモダンブラウザのみ。IE8とか言われると、少し厳しい。旧バージョンなら大丈夫らしい(これは試してないから、聞いた話程度)
  • 少しだけ実装に手間がかかる。というか、bxsliderとかが簡単すぎるんだけど。それよりは少し手間がかかる程度。
  • 容量が四天王の中で最大。他より30KBくらい大きい。まあ、誤差程度ではあるけど一応。

最新版のサポートがモダンブラウザ限定という部分が結構痛いけど、それさえクリアすれば非常に万能で使いやすいsliderだと思う。

実装について

大体ここに書いてある。
http://idangero.us/swiper/api/
ざっくり説明すると、
1、公式ページからjsをダウンロード。headタグではなく、/bodyの上に置く。あと、これだけだと実装はされないので注意。
2、swiperを実装したいブロック(divタグ)に.swiper-containerをつける。
3、div.swiper-containerにdiv.swiper-wrapperを。
4、さらにその中にdiv.swiper-slideを。
5、swipeを実装するための記述とか、オプションを記述するために使うjsを作成する。このjsも/bodyの上に設置する。

これで基本は完成。こんなん。

<!-- Slider main container -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">ここに1つ目のスライド!</div>
        <div class="swiper-slide">ここに2つ目のスライド</div>
        <div class="swiper-slide">ここに3つ目のスライド</div>
    </div>
</div>
var swiper;
$(window).load(function() {
    swiper = new Swiper('.swiper-container', {
    // この中にオプションを記述する。
    });
});

あとは、下(縦スライドの場合は右)にpagination(pagination)をつける場合はdiv.swiper-paginationを、
次へボタン、前へボタンをつけたい場合はdiv.swiper-button-prev、div.swiper-button-nextを、
スクロールバーをつけるならdiv.swiper-scrollbarをdiv.swiper-containerの中に入れる。
次へボタンとかは普通に実装するとデフォルトのデザインになっちゃうから、注意。

オプションについて

ここからが本題。このオプションを使わないとわざわざswiper.jsを使う理由ないからね!
オプションのつけ方はこんな感じ

var swiper;
$(window).load(function() {
    swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        direction: 'vertical',
        touchAngle: 90,
        onTouchStart: function() {
            alert("touchstart!!");
        }
    });
});

コールバック(例で言うと、onTouchStart)はfunction(){}を書いて、その中に処理したい内容を記述する。
それ以外は数値とか、指定された文字列を入れるって感じ。
コールバックに関しては、簡単なやつなら直接書いてもいいけど、長い処理の場合は別でfunction用意しておいて、それを実行する

function start_alert() {
    alert("touchstart!!");
}
// 中略
onTouchStart: function() {
    start_alert();
}

こんな感じで書いた方がいいと思う。その方がわかりやすいし。

以下、オプションの流し込み

基本オプション

initialSlide
数。
一番最初に表示させるスライドの番号(0スタート)。
デフォルトでは0。

direction
文字列。
スライドの方向。横(horizontal)か縦(vertical)か。
デフォルトでは横(horizontal)。

speed
数。
スライドの速度。数字が大きければ遅く、小さければ早くなる。ミリ秒。
デフォルトでは300。

setWrapperSize
真偽。
.swiper-wrapperに全てのスライドの合計の幅(もしくは高さ)がpxでセットされる。width300pxのスライドが5枚の場合、.swiper-wrapperのwidthは1500pxになる。
デフォルトではfalse。

virtualTranslate
真偽。
trueにすると.swiper-wrapperのtransformが削除される。普通にスッと移動するスライドじゃなくて、凝ったアニメーションでの遷移をしたい場合に使用する。CSS・JSでのアニメーションの知識が必要。
デフォルトではfalse。

width
数。
スライドの幅を指定する。当たり前だけど、これを指定するとレスポンシブの機能がなくなる。
デフォルトでは100%みたいな感じ(厳密には少し違うけど)。

height
数。
スライドの高さを指定する。当たり前だけど、これを指定するとレスポンシブの機能がなくなる。
デフォルトではautoみたいな感じ(厳密には少し違うけど)。

autoHeight
真偽。
trueにすると、.swiper-wrapperの高さがslideの中身ぴったりになる。それぞれ中身の高さが違う場合、スライドするたびに、次のスライドの高さに自動で数字が変わる。
デフォルトではfalse。

roundLengths
真偽。
trueにすると、スライドの幅や高さが決めてあったら、中のテキストや画像をぼやけないように調整してくれる。通常はfalseで、ぼやける不具合が出た時に初めてtrueにするってした方がいいかも。あと、なんか不具合起きてる時になんとなくつけてみるとうまくいく時があるらしい(この使い方はあまりお勧めできないけれど)。
デフォルトではfalse。

nested
真偽。
trueにすると、入れ子になったSwiper(つまり、Swiperの中でさらにSwiperを使っている時)のタッチイベントが正常に取れるようになる。
デフォルトではfalse。

自動再生関連

autoplay
数。
これを設定すると、何ミリ秒ごとに遷移するかを設定できる。このパラメータが設定されていない場合、自動再生自体がされない。
個別にスライドのミリ秒を設定したい場合、div.swiper-slideにdata-swiper-autoplayを追加する。

<div class="swiper-slide" data-swiper-autoplay="2000">

デフォルトでは設定されていない状態。

autoplayStopOnLast
真偽。
trueにすると、最後のスライドになった時に自動再生が停止する。後述する、loopのオプションを設定している場合は効かない。
デフォルトではfalse。

autoplayDisableOnInteraction
真偽。
trueだと、ユーザーがスライドを操作した後自動再生が停止する。falseだとユーザーが操作しても自動再生がされっぱなし。
デフォルトではtrue。

進捗

watchSlidesProgress
真偽。
進捗状態を計算するオプション、らしい。でもその数字がどこで取れるのかわからない。自分の中では、後述するwatchSlidesVisibilityのオプションの前提オプションって認識。
デフォルトではfalse。

watchSlidesVisibility
真偽。
watchSlidesProgressがtrue前提。trueにすると画面に表示されているスライドにswiper-slide-visibleのクラスが追加される。複数表示されている場合は、そのすべてにこのクラスがつく。

freeMode

freeMode
真偽。
これをtrueにすると、スワイプした際にスライドぴったりに止まらなくなる。固定位置がなくなるというかなんというか。
デフォルトではfalse。

freeModeMomentum
真偽。
freeModeがtrue前提。trueだと、FreeModeでのスワイプ時に慣性スクロールみたいなのが働くようになる。
デフォルトではtrue。

freeModeMomentumRatio
数。
freeModeMomentumがtrue前提。数字を大きくすれば、慣性スクロール的なやつの距離を延ばせる。
デフォルトでは1。

freeModeMomentumVelocityRatio
数。
freeModeMomentumがtrue前提。数字を大きくすれば、慣性スクロール的なやつの速度を早くできる。
デフォルトでは1。

freeModeMomentumBounce
真偽。
freeModeMomentumがtrue前提。trueだと一番最後のスライドに行った時にバウンスする感じのアニメーションが起きる。
デフォルトではtrue。

freeModeMinimumVelocity
数。
freeModeMomentumがtrue前提。freeModeを開始するトリガーとなるスワイプの最小速度を設定できる。
デフォルトでは0.02。

freeModeSticky
真偽。
freeModeがtrue前提。trueだと、freeModeで慣性が切れる着地点に対して一番近い固定位置に収まるようになる。スナップが有効になる。
デフォルトではfalse。

効果

effect
文字列
“slide”, “fade”, “cube”, “coverflow” もしくは “flip”
スライドの仕方を選択できる。スライドにするか、フェードにするか、箱がくるっと回転したようなものにするか、横から半回転する感じでやってくるものにするか、中心で回転する感じにするか。基本、slideもしくはfadeで良いと思う。
デフォルトではslide。

fade
object。
effectがfade前提。
デフォルトでは

fade: {
  crossFade: false
}

これを書くとクロスフェードをオンオフにできる(クロスフェードは、前のスライドのフェードアウトと次のスライドのフェードインを同時に行うもの)。

cube
effectがcube前提。
デフォルトでは

cube: {
  slideShadows: true,
  shadow: true,
  shadowOffset: 10000000,
  shadowScale: 0.94
}

見てわかる通り、影をつけるかつけないか、どのくらいつけるかを設定できる。
slideShadowsで側面の影のオンオフ。shadowでキューブの下にある影のオンオフ。shadowOffsetで影の位置、shadowScaleで影の大きさ。
slideShadowsをfalseにすると境界線みたいなのがちらつくことがあるから、基本デフォルト推奨。

coverflow
effectがcoverflow前提。
デフォルトでは

coverflow: {
  rotate: 50,
  stretch: 0,
  depth: 100,
  modifier: 1,
  slideShadows : true
}

rorateは次のスライドに行く時までに各スライドがどの程度回転するかの角度。stretchはスライド間の距離。depthは奥行き。modifierは角度(つけすぎ注意)。slideShadowsはスライドにある影。
基本デフォルト推奨。

flip
effectがflip前提。
デフォルトでは

flip: {
  slideShadows : true,
  limitRotation: true
}

slideShadowsはスライドの影。limitRotationは角度の制限みたいなものなんだけど、これfalseにすると動きやばくなるからtrue固定でいいと思う。

parallax

parallax
真偽。
スライドの内側でパララックスを実装したい場合はこれをtrueにする必要があるらしい。最終的にはパララックスの仕方にもよるとは思うけど。
デフォルトではfalse。

Slides grid

spaceBetween
数。
スライドの間の距離を設定できる。
デフォルトでは0。

slidesPerView
数字もしくはauto。
1画面で見えるスライドの数を設定できる。loopを設定したい場合は、一緒にloopedSlidesの設定をする必要がある。slidesPerView:autoとslidesPerColumnは一緒に設定してはいけない。
デフォルトでは1。

slidesPerColumn
数。
列ごとのスライド数。独自のスライドの動きと合わせたりすると面白い。
デフォルトでは1。

slidesPerColumnFill
文字列。
columnもしくはrow。slidesPerColumnなどを実装した際に、どのようにして埋めるかを設定できる。列をベースに埋めるか、行をベースに埋めるか。
デフォルトではcolumn。

slidesPerGroup
数。
複数のスライドを1つにまとめる。スワイプした際にグループで囲った全てが同時にスライドする。実質slidesPerViewが2以上前提な気がする。
デフォルトでは1。

centeredSlides
真偽。
trueにすると、スライドのスタートが真ん中になる。実質slidesPerViewが3以上の奇数前提な気がする。
デフォルトではfalse。

slidesOffsetBefore
数。
全てのスライドの前に追加で余白を設ける。余白は1つ分のスライドとして認識される。それぞれのスライドは余白分ずれて見える。ピクセル。
デフォルトでは0。

slidesOffsetAfter
数。
全てのスライドの最後に追加で余白を設ける。余白は1つ分のスライドとして認識される。ピクセル。
デフォルトでは0。

カーソル

grabCursor
真偽。
trueだとカーソルがスライドに乗った時、グラブになる。当然だけどスマホは意味なし。
デフォルトではfalse。

タッチ(スマホ)

touchEventsTarget
文字列。
containerもしくはwrapper。タッチイベントの対象をどちらにするか選択できる。基本containerでいいと思う。
デフォルトではcontainer。

touchRatio
数。
しきい値。どのくらいスワイプしたら次のスライドに行くかを設定できる。数字が大きければ少しのスワイプで次に行く。スライドのサイズに応じて設定した方がいい。
デフォルトでは1。

touchAngle
数。
スワイプを認識する角度を設定できる。スライドのサイズが大きいなら数字を大きくした方がいい。
デフォルトでは45。

simulateTouch
真偽。
trueだとタッチイベント(マウスイベント)を認識するようになる。falseにする意味はそんなない気がする。
デフォルトではtrue。

shortSwipes
真偽。
時間の短いスワイプを無効にする場合はfalseを設定する。基本デフォルト推奨。
デフォルトではtrue。

longSwipes
真偽。
時間の長いスワイプを無効にする場合はfalseを設定する。基本デフォルト推奨。
デフォルトではtrue。

longSwipesRatio
数字。
時間の長いスワイプをした時に、どのくらい次(もしくは前)のスライドが見えてたら次(もしくは前)のスライドに行くかを設定できる。個人てきには0.4くらいが好き。
デフォルトでは0.5。

longSwipesMs
数。
時間の長いスワイプをした時に、どのくらい経過したら次(もしくは前)のスライドへ行くのをキャンセルするかを設定できる。ミリ秒。
デフォルトでは300。

followFinger
真偽。
falseだとスワイプした時に次のスライドや前のスライドが見えるような動きをキャンセルできる。true推奨。
デフォルトではtrue。

onlyExternal
真偽。
trueだとスライドする手段がslidePrevやslideNextなどの外部限定になる。少なくともスマホではfalse推奨。
デフォルトではfalse。

threshold
数。
しきい値。この数値よりスワイプ距離が短い場合、スライダーは動かない。ピクセル。
デフォルトでは0。

touchMoveStopPropagation
真偽。
trueにすることでイベントのバブリングを防ぐ。デフォルト推奨。
デフォルトではtrue。

iOSEdgeSwipeDetection
真偽。
iOSのUIWebViewにおいてスワイプのイベントを有効にするための設定。らしい。
デフォルトではfalse。

iOSEdgeSwipeThreshold
数。
iOSのUIWebViewにおいてここで画面左端から設定した数より小さい数の範囲ではスワイプのイベントが有効にならない。らしい。
デフォルトでは20。

touchReleaseOnEdges
真偽。
trueだとスライダーをスワイプでスライドさせている時にも画面がスクロールされるようになる。
デフォルトではfalse。

passiveListeners
真偽。
スマホでのパフォーマンスを高める。基本デフォルトでいいと思うけどe.preventDefaultを使用する場合は競合してしまうため、こちらをfalseにする必要がある。
デフォルトではtrue。

resistance

resistance
真偽。
trueだと最後のスライドもしくは最初のスライドで次に行こうとする時に発生するバウンスアニメーションに抵抗力がつくようになる。
デフォルトではtrue。

resistanceRatio
数。
抵抗力を強めたり弱めたりできる。
デフォルトでは0.85。

クリック

preventClicks
真偽。
スワイプ中での不要なクリックを無効にできる。ユーザビリティ的にtrue推奨。
デフォルトではtrue。

preventClicksPropagation
真偽。
スワイプ中のクリックイベントを無効にできる。ユーザビリティ的にture推奨。
デフォルトではtrue。

slideToClickedSlide
真偽。
スワイプ中にクリックした時、今の動きをキャンセルしてクリックした側のスライドに移動する。ゆっくりなスライダーでない限り、ユーザビリティ的にfalse推奨。
デフォルトではfalse。

スワイプ

allowSwipeToPrev
真偽。
falseだとスワイプで前に戻る動きができなくなる。
デフォルトではtrue。

allowSwipeToNext
真偽。
falseだとスワイプで次行く動きができなくなる。
デフォルトではtrue。

noSwiping
真偽。
trueだとnoSwipingClassで指定したクラスを持ったスライドはスワイプの操作が効かなくなる。
デフォルトではtrue。

noSwipingClass
文字列
noSwipingがture前提。ここで指定したクラス名を持ったスライドはスワイプの操作が効かなくなる。
デフォルトでは’swiper-no-swiping’。

swipeHandler
文字列(htmlElement)
ここで指定したクラス上でしかスワイプ操作が効かなくなる。
デフォルトでは’null’。

Navigation Controls

uniqueNavElements
真偽。
paginationやボタンなどを認識する際、swiperに(階層として)一番近いものが適用される。不具合の原因になるため、デフォルト推奨。
デフォルトではtrue。

Pagination

Pagination
文字列(htmlElement)
指定した空のdivの中にpaginationをつける。指定はクラス名推奨。別のスライダーが存在する場合、クラス名は分けた方がいい。
デフォルトでは’null’

paginationType
文字列。
‘bullets’、’fraction’、’progress’もしくは’custom’。
paginationの種類を選択できる。丸い円か、数字か、barか、カスタム。progressは結構かっこいい。
デフォルトでは’bullets’。

paginationHide
真偽。
trueにすると、スライド上でクリックした際にpaginationが消えたり出たりするようになる。
デフォルトではfalse。

paginationClickable
真偽。
trueにするとpaginationをクリックした際に、そのpaginationの適切なスライドにスライドする(国語力やべえ)。
デフォルトではfalse。

paginationElement
文字列。
ここで指定したタグでpaginationが形成されるようになる。divとかliとかにしたい時に。
デフォルトでは’span’。

paginationBulletRender(swiper, index, className)
関数
paginationTypeがbullets前提。bulletsのpaginationをカスタマイズできる。
公式の例

var swiper = new Swiper('.swiper-container', {
  //...
  paginationBulletRender: function (swiper, index, className) {
      return '<span class="' + className + '">' + (index + 1) + '</span>';
  }
});

pagination個別につけたいクラスがあったり、タグの間に何かを挟みたい時(アイコンとか)にどうぞ。
デフォルトではnull。

paginationFractionRender(swiper, currentClassName, totalClassName)
関数
paginationTypeがfraction前提。fractionのpaginationをカスタマイズできる
公式の例

var swiper = new Swiper('.swiper-container', {
  //...
  paginationFractionRender: function (swiper, currentClassName, totalClassName) {
      return '<span class="' + currentClassName + '"></span>' +
             ' of ' +
             '<span class="' + totalClassName + '"></span>';
  }
});

数字と数字の間を文字や画像にしたい時とかにどうぞ。
デフォルトではnull。

paginationProgressRender(swiper、progressbarClass)
関数
paginationTypeがprogress前提。progressのpaginationをカスタマイズできる。
公式の例

var swiper = new Swiper('.swiper-container', {
  //...
  paginationProgressRender: function (swiper, progressbarClass) {
      return '<span class="' + progressbarClass + '"></span>';
  }
});

独自のクラスをつけたい時とかにどうぞ。
デフォルトではnull。

paginationCustomRender(swiper, current, total)
関数
paginationTypeがcustom前提。customのpaginationをカスタマイズできる・・・って当たり前だけど。
公式の例

var swiper = new Swiper('.swiper-container', {
  //...
  paginationCustomRender: function (swiper, current, total) {
      return current + ' of ' + total;
  }
});

オリジナルのpaginationを設置したい時にどうぞ。
デフォルトではnull。

ナビゲーションボタン

nextButton
文字列(htmlElement)
ナビゲーションボタンを設置する。静的にhtmlで次へボタンを設置した後、このオプションでその設置したボタンのクラスを指定することで実装できる。
デフォルトではnull。

prevButton
文字列(htmlElement)
ナビゲーションボタンを設置する。静的にhtmlで前へボタンを設置した後、このオプションでその設置したボタンのクラスを指定することで実装できる。

スクロールバー

scrollbar
文字列(htmlElement)
スワイプ中にスクロールバーを表示させる。空のdivを用意して、そのdivにあるクラス名をこのオプションで指定することで実装できる。
デフォルトではnull。

scrollbarHide
真偽。
trueだとスワイプが完了したらスクロールバーが消える。
デフォルトではtrue。

scrollbarDraggable
真偽。
trueだとスクロールバーをドラッグできるようになる。
デフォルトではfalse。

scrollbarSnapOnRelease
真偽。
tureだとスクロールバーをドラッグした後、一番近いスライドにスナップするようになる。scrollbarDraggableをtrueにしてるならこっちもtrue推奨。
デフォルトではfalse。

アクセシビリティ

a11y
真偽。
音声やスクリーンリーダーを使用する場合はtrue。
デフォルトではfalse。

prevSlideMessage
文字列。
前ボタンのスクリーンリーダーでの文字。
デフォルトでは’Previous slide’。

nextSlideMessage
文字列。
次ボタンのスクリーンリーダーでの文字。
デフォルトでは’Next slide’。

firstSlideMessage
文字列。
最初のスライドの時に出るスクリーンリーダーでの文字。
デフォルトでは’This is the first slide’。

lastSlideMessage
文字列。
最後のスライドの時に出るスクリーンリーダーでの文字。
デフォルトでは’This is the last slide’。

paginationBulletMessage
文字列。
paginationで使用するスクリーンリーダーでの文字。
デフォルトでは’Go to slide {{index}}’

キーボード

keyboardControl
真偽。
trueだとキーボードの左右でスライドが可能になる。ユーザー環境に左右されるから使用する際はそれを考慮すること。
デフォルトではfalse。

mousewheelControl
真偽。
trueだとマウスホイールでのスライドが可能になる。ユーザー環境に左右されるから使用する際はそれを考慮すること。
デフォルトではfalse。

mousewheelForceToAxis
真偽。
マウスホイールでのスライドが、ホイールした方向と一致しないとスライドしなくなる。マウスホイールに横にホイールする機能がない時、ホイールで横にスワイプすることができなくなる。
デフォルトではfalse。

mousewheelReleaseOnEdges
真偽。
mousewheelControlがtrue前提。trueの場合、ホイールでスライドしてる時でもページがスライドされる。

mousewheelInvert
真偽。
trueだとマウスホイールでのスライドが逆方向になる。デザイン次第では逆のが
デフォルトではfalse。

mousewheelInvert
数。
マウスホイールの感度調整。数が大きければ、その分スクロールが強くなる。高くしすぎ注意。
デフォルトでは1。

mousewheelEventsTarged
文字列(htmlElement)
マウスホイールのイベントが発火する対象を指定できる。特定のスライドに来た時だけマウスホイールイベントを発火とかそういう時に使うかも。
デフォルトでは’container’。

ハッシュ

hashnav
真偽。
trueにして、各スライドにdata-hash=”slide1″のような感じでdata-hashを設置すると、url#slide1といったurlでdata-hashが一致するところからスライドが始まる。
デフォルトではfalse。

hashnavWatchState
真偽。
trueだと、スライドするたびにurlの末尾にdata-hashがハッシュで書かれるようになる(リロードはされない)。
デフォルトではfalse。

history
文字列
.swipe-sliderにdata-history属性を書くと、その中の文字列がURLにつく。
デフォルトでは何もなし。

replaceState
真偽。
ハッシュ法(document.location.hash)またはpushState(window.history.replaceState)メソッドをhashnavで使用するのではなく、代わりにreplaceState(window.history.replaceState)メソッドを使う。
デフォルトではfalse。

preloadImages
真偽。
プリロード。事前にスライドで使う画像を読み込んでおくもの。
デフォルトではtrue。

updateOnImagesReady
真偽。
preloadImagesがture前提。画像が全て読み込んだらスライドを初期化する。ture推奨。
デフォルトではtrue。

lazyLoading
真偽。
preloadImagesがfalse前提。画像を遅延して読み込む。スライドに重い画像があったりする場合に。
デフォルトではfalse。

lazyLoadingInPrevNext
真偽。
lazyLoadingがture前提。遅延読み込みが最初表示されてる画像と次に表示される画像にも適応される。
デフォルトではfalse。

lazyLoadingInPrevNextAmount
数。
lazyLoadingInPrevNextがture前提。lazyLoadingInPrevNextの遅延読み込みが適応される枚数を選択できる。slidesPerViewで2枚以上セットでスライドしてたりする時に使う。
デフォルトでは1。

lazyLoadingOnTransitionStart
真偽。
lazyLoadingがture前提。lazyLoadingではスワイプ完了後に読み込むけど、ここをtureにするとスワイプ開始時に読み込むようになる。
デフォルトではfalse。

ループ

loop
真偽。
trueだとループするようになる(最後のスライドの時にnextのボタンを押したりすると最初のスライドに行く。逆も同様)。これを設定した際、正面のスライドに.swiper-slide-duplicate-activeが、次のスライドに.swiper-slide-duplicate-nextが、前のスライドに.swiper-slide-duplicate-prevが追加される。
デフォルトではfalse。

loopAdditionalSlides
数。
ループ作成時に作成されるクローンの枚数。見た目では特に変化せず、ソースコード上で変わる。
デフォルトでは0。

loopedSlides
数。
slidesPerviewがautoの時に、ループする数を設定する際に使用する。
デフォルトではnull。

ズーム

zoom
真偽。
trueだとダブルクリックでズームするようになる(スマホ、ダブレットの場合2本指で拡大できる)。ダブルクリックした箇所が拡大される。画像の解像度注意。
デフォルトではfalse。

zoomMax
数。
ズームの最大倍率。数が大きいとより拡大できるようになる。画像の解像度と相談。
デフォルトでは3。

zoomMin
数。
ズームの最小倍率。
デフォルトでは1。

zoomToggle
真偽。
falseだとダブルクリックでのズームが出来なくなり、スマホ及びダブレットの指でのズームしかできなくなる。
デフォルトではtrue。

コントロール

control
変数名
複数スライドがあるときに、片方をスライドしたら別のやつもスライドするようにする。

var Swiper_01 = new Swiper('#swiper_01',{
})
var Swiper_02 = new Swiper('#swiper_02',{
})
Swiper_01.params.control = Swiper_02;
Swiper_02.params.control = Swiper_01;

デフォルトではundefined。

controlInverse
真偽。
trueだと、controlで指定したものと動きが逆方向になる。Aが右から左なら、Bが左から右。

var Swiper1 = new Swiper('#swiper-container1',{
})
var Swiper2 = new Swiper('#swiper-container2',{
})
Swiper1.params.control = Swiper2;
Swiper1.params.controlInverse=true;

controlBy
文字列
‘slide’もしくは’container’
slideだと片方が1枚分スライドするともう片方も1枚分スライドする。containerだと両方のスライドの枚数を比較して、相対位置のスライドになる。例えば、片方が10枚のスライドでもう片方が3枚のスライドの時、2枚の方を1回スライドして2枚目に行くと、もう片方は5枚目に行く。片方が5枚でもう片方が3枚の時、3枚の方を1回スライドすると、もう片方は3枚目に行く。
デフォルトでは’slide’。

normalizeSlideIndex
真偽。
centeredSlidesを使っている時に、1枚目が3枚目として認識されているのをtrueだと1枚目として認識してくれるようになる。
公式参考URL https://github.com/nolimits4web/Swiper/pull/1766
デフォルトではtrue。

Observer

observer
真偽。
スライド作成後にスタイルの変更やスライドの表示非表示を変更する時に、falseだと崩れるけど対応するようになる。その分、少し重くなる印象。
デフォルトではfalse。

observeParents
真偽。
スライドの親要素にもobserverが適応されるようになる。observerがtrueならこちらもtrueがいいと思う。
デフォルトではfalse。

Breakpoints

breakpoints
オブジェクト
画面サイズごとでパラメータを設定したい場合に。breakpoints内で設定できるものと出来ないものがある。レイアウト関係と、ロジック(関数とか)がないもののみ適応できるらしい。公式曰く、slidesPerView、slidesPerGroup、spaceBetweenなどは設定できるけど、slidesPerColumn、loop、direction、effectは設定できない。
公式例

var swiper = new Swiper('.swiper-container', {
  // Default parameters
  slidesPerView: 4,
  spaceBetween: 40,
  // Responsive breakpoints
  breakpoints: {
    // when window width is <= 320px
    320: {
      slidesPerView: 1,
      spaceBetween: 10
    },
    // when window width is <= 480px
    480: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // when window width is <= 640px
    640: {
      slidesPerView: 3,
      spaceBetween: 30
    }
  }
})

Callbacks

runCallbacksOnInit
真偽。
transitionやslideChangeの開始時や終了時のCallbacksを実行する。要するにCallbacksを使う前提オプション。
デフォルトではtrue。

OnInit(swiper)
関数
スライドの初期化完了時に実行する関数。スライドのロード完了時とかそういう認識。

onSlideChangeStart(swiper)
関数
スライドの移動(次、前両方)開始時に実行される関数。

onSlideChangeEnd(swiper)
関数
スライドの移動(次、前両方)終了時に実行される関数。

onSlideNextStart(swiper)
関数
次のスライドに行く時のみ実行される関数。

onSlideNextEnd(swiper)
関数
次のスライドに行った時のみ実行される関数。

onSlidePrevStart(swiper)
関数
前のスライドに行く時のみ実行される関数。

onSlidePrevEnd(swiper)
関数
前のスライドに行った時のみ実行される関数。

onTransitionStart(swiper)
関数
スライドアニメーションの開始時に実行される関数。onSlideChangeStartの次のタイミング。

onTransitionEnd(swiper)
関数
スライドアニメーションの終了時に実行される関数。onSlideChangeEndの次のタイミング。

onTouchStart(swiper、event)
関数
ユーザーがタッチしたら実行される関数。

onTouchMove(swiper、event)
関数
ユーザーがスライド上で指を動かしたら実行される関数。

onTouchMoveOpposite(swiper、event)
関数
ユーザーがスライド上で指を動かしたけど、touchAngleの判定外だった時に実行される関数。

onSliderMove(swiper、event)
関数
ユーザーがスワイプしてスライドを移動させている間実行される関数。スライドを掴んでいる状態に実行されるというか。

onTouchEnd(swiper、event)
関数
ユーザーが指を離した時に実行される関数。

onClick(swiper、event)
関数
スライドをクリックしたら実行される関数。

ONTAP(swiper、event)
関数
タップした時に実行される関数。

onDoubleTap(swiper、event)
関数
2回タップした時に実行される関数。

onImagesReady(swiper)
関数
スライドで使う画像が全て読み込まれたら実行される関数。

onProgress(swiper、progress)
関数
activeのスライドから次(前)のスライドに遷移する際、スライドがどのくらい遷移されているかを取得してその遷移量に応じて実行される関数。progressが遷移量の値。

onReachBeginning(swiper)
関数
初期位置(デフォルトで言う、1枚目)に来た時に実行される関数。

onReachEnd(swiper)
関数
最後のスライドに来た時に実行される関数。

onDestroy(swiper)
関数
スライドに対してdestroyが実行された時に実行される関数。

onSetTranslate(swiper,translate)
関数
.swiper-wrapperが移動する時に実行される関数。

onSetTransition(swiper、transition)
関数
swiperに対してアニメーションが実行される度に実行される関数。掴んでいる時とかに、掴んで移動させる度に実行される。

onAutoplay(swiper)
関数
onSlideChangeStartと同じタイミングなんだけど、自動再生での遷移にのみ実行される関数。

onAutoplayStart(swiper)
関数
自動再生が開始された時に実行される関数。

onAutoplayStop(swiper)
関数
自動再生が停止された時に実行される関数。

onLazyImageLoad(swiper, slide, image)
関数
遅延ロードを設定している時に、遅延ロード開始時に実行される関数。

onLazyImageReady(swiper, slide, image)
関数
遅延ロードを設定している時に、画像の遅延読み込みが完了されると実行される関数。

onPaginationRendered(swiper、paginationContainer)
関数
paginationが生成された時に実行される関数。

onScroll(swiper、E)
mousewheelでスライドなどがされた時に実行される関数。

各クラス名の設定(複数人での管理がしにくくなるためデフォルト推奨)

containerModifierClass
swiperの全体を囲っているdivにつくクラスにつく先頭。
デフォルトでは’swiper-container-‘。

slideClass
各スライドにつくクラス。
デフォルトでは’swiper-slide’。

slideActiveClass
アクティブになってるスライドにつくクラス。
デフォルトでは ‘swiper-slide-active’

slideDuplicatedActiveClass
アクティブになってる複数のスライドにつくクラス。
デフォルトでは’swiper-slide-duplicate-active’。

slideVisibleClass
表示されているスライドのクラス。
デフォルトでは’swiper-slide-visible’。

slideDuplicateClass
loop設定時につくスライドのクラス。
デフォルトでは ‘swiper-slide-duplicate’。

slideNextClass
次のスライドにつくクラス。
デフォルトでは’swiper-slide-next’。

slideDuplicatedNextClass
次のスライドで複数ある場合につくクラス。
デフォルトでは ‘swiper-slide-duplicate-next’。

slidePrevClass
前のスライドにつくクラス。
デフォルトでは’swiper-slide-prev’。

slideDuplicatedPrevClass
前のスライドで複数ある場合につくクラス。
デフォルトでは’swiper-slide-duplicate-prev’。

wrapperClass
ラッパーにつくクラス。
デフォルトでは’swiper-wrapper’。

bulletClass
paginationTypeがbullet時につくクラス。
デフォルトでは’swiper-pagination-bullet’。

bulletActiveClass
paginationTypeがbullet時にアクティブのpaginationにつくクラス。
デフォルトでは’swiper-pagination-bullet-active’。

paginationHiddenClass
非アクティブのpaginationにつくクラス。
デフォルトでは’swiper-pagination-hidden’。

paginationCurrentClass
paginationTypeがfraction時にアクティブのpaginationにつくクラス。
デフォルトでは’swiper-pagination-current’。

paginationTotalClass
paginationTypeがfraction時に総数の値につくクラス。
デフォルトでは’swiper-pagination-total’。

paginationProgressbarClass
paginationのprogressbarにつくクラス。
デフォルトでは’swiper-pagination-progressbar’。

paginationClickableClass
paginationがクリックできる時につくクラス。
デフォルトでは’swiper-pagination-clickable’。

paginationModifierClass
パラメータの設定次第でpaginationに追加されるクラスの先頭。
デフォルトでは ‘swiper-pagination-‘。

buttonDisabledClass
次へ、前へボタンが無効になった時につくクラス。
デフォルトでは’swiper-button-disabled’。

lazyLoadingClass
遅延ロード設定時につくクラス。
デフォルトでは’swiper-lazy’。

lazyStatusLoadingClass
遅延ロード中につくクラス。
デフォルトでは’swiper-lazy-loading’。

lazyStatusLoadedClass
遅延ロード完了したスライドにつくクラス。
デフォルトでは’swiper-lazy-loaded’。

lazyPreloaderClass
遅延ロード設定時にプリローダーしている時につくクラス。
デフォルトでは’swiper-lazy-preloader’。

preloaderClass
プリローダーそのもののクラス。
デフォルトでは’preloader’。

zoomContainerClass
zoom設定時につくクラス。
デフォルトでは’swiper-zoom-container’。

notificationClass
a11y設定時につくクラス。
デフォルトでは’swiper-notification’。

あとメソッドとかあるけどとりあえずここまで。
あー疲れた。

「swiper.js使ってみたからそのオプションについて」への20件のフィードバック

  1. はじめまして。田中と申します。

    “特定のボタンを押した時に、特定のスライドに移動するとかそういうのが非常に簡単にできる。”

    まさにこの機能を実装したいのですが、別のボタンからどのように該当スライドをアクティブにできるのでしょうか。

    hashでやってもうまくいかなかったので、ご教授頂けますと幸いです。

    1. 田中さん

      初めまして。コメントありがとうございます。
      >“特定のボタンを押した時に、特定のスライドに移動するとかそういうのが非常に簡単にできる。”
      >まさにこの機能を実装したいのですが、別のボタンからどのように該当スライドをアクティブにできるのでしょうか。
      >hashでやってもうまくいかなかったので、ご教授頂けますと幸いです。

      こちらの機能を実装するには2つの作業が必要になります。
      1、押すボタンにdata-hashを記述します。

       <p class="btn" data-hash="3"><img src="./images/btn.png" alt=""></p>
      

      2、jsに以下のようなものを記述します。

       $(window).load(function() {
          $('.btn[data-hash]').on('click', function () {
            swiper.slideTo($(this).data('hash'));
          });
        });
      

      slideTo()で()内のインデックス番号にスワイプします。この例ですと3になります。
      まず、ハッシュを使わずにswiper.slideTo(3)のように直接数字を入れてみてください。それで動くのでしたらhashにしても動くはずです。動かない場合、構文ミスになりますので、一度検証ツールのコンソールを見て、エラー内容を確認してください。エラーもない場合はclick自体が効いていないか、何かが上に重なっている可能性が高いのでそれがないか調べてください。
      サンプル

      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>テスト</title>
      <script src="./common/js/jquery-1.11.1.min.js"></script>
      <style>
      .swiper-slide {
          width: 1000px;
          height: 1000px;
      }
      .test {
          position: absolute;
          top: 0;
          right: 0;
          height: 100px;
          width: 100px;
          background-color: #000;
      }
      </style>
      </head>
      <body>
      <!-- Slider main container -->
      <div class="swiper-container">
          <div class="swiper-wrapper">
              <div class="swiper-slide">ここに1つ目のスライド!</div>
              <div class="swiper-slide">ここに2つ目のスライド</div>
              <div class="swiper-slide">ここに3つ目のスライド</div>
          </div>
      </div>
      <div class="test" data-hash="3"></div>
      <script src="./common/js/swiper.min.js"></script>
      <script>
      var swiper;
      $(window).load(function() {
        swiper = new Swiper('.swiper-container', {
          direction: 'vertical',
        });
        $('.test[data-hash]').on('click', function () {
          swiper.slideTo($(this).data('hash'));
        });
      });
      </script>
      </body>
      </html>
      
  2. はじめまして。
    swiper 止まるで検索したところ、こちらの記事にたどり着きました。

    多くのオプションがある中で目当のオプションがあるかどうか分からなかったので質問させて頂きます。

    ●リンク付きの画像を自動でスライドさせているのですがクリック又はフリックするとスライドが停止していまいます。
    再度自動再生させるにはどうしたらよろしいのでしょうか?

    もしも解決できる内容でしたらご教示頂けましたら幸いです。

    できましたら添付しておりますurlは非公開でお願い致します。
    宜しくお願い致します。

    1. しょうほんさん

      コメントありがとうございます。
      autoplayDisableOnInteractionのオプションを使用すれば実現できます。
      swiper = new Swiper(‘.swiper-container’, {
      direction: ‘vertical’,
      autoplay: 2000,
      autoplayDisableOnInteraction: false
      });
      こんな感じにすれば大丈夫です。お試しください。

  3. 初めまして。
    オプションの解説が詳しく書いてあり重宝させていただいてます。

    ひとつご存知でしたら教えてほしいことが…

    ここに1つ目のスライド!
    ここに2つ目のスライド
    ここに3つ目のスライド

    というデフォルトの書式で書いているのですが、「開始スライド」を指定することはできますでしょうか?
    http://hogehoge.com/swiper/
    と書いたとき、何もしないと上記HTMLの「ここに1つ目のスライド!」が表示されるかと思います。これを「ここに3つ目のスライド」が開く状態にしたいのです…。

    使いみちとしては、右開きの和書のようなものをswiperで作っているのですが、表紙部分が一番最後に来てしまうため、表紙を一番最初に表示させたいと思ったことです。

    どうぞよろしくお願い申し上げます。

  4. も、申し訳ございません!!

    initialSlide
    を指定したら大丈夫でした。
    基本オプションの一番上に書いてあることでしたね…

    1. yunosukeさん

      コメントありがとうございます!
      解決できたようで良かったです。和書・・・なかなか面白いサイトになりそうですね。少し難しいものになりますけど、virtualTranslateやonSlideChangeEndを設定してオリジナルの動きをつけるとより和書っぽいものになるのかなー、とか色々考えられます。
      今後ともよろしくお願いします。

  5. swiperのオプションを調べていたらたどり着きました。
    いろいろと参考にさせていただいてます。

    ひとつご教授いただきたいことがあるのですが、
    コールバック関数を使用したのですが、
    その際、スライドの番号によって処理を分けたいと考えています。
    たとえば、bxsliderなら
    if(oldIndex == 4){
    //4枚目のスライドの処理
    }
    みたいなことができるのですが、swiperでも同じことができないかと思ってります。
    大変図々しく恐縮ですが、もしご存知でしたら。

    1. penguinさん

      コメントありがとうございます!
      特定のスライド枚数に来た時にそれ毎の処理を実行する方法ですが、activeIndexによって実現できます。これは記事には書いてないプロパティの部分なので、申し訳ありませんが詳しくは公式サイトを見ていただければと思います。
      書き方はbxsliderのそれと同じような感じです。
      注意点があるとすれば、最初のスライドの時に前に戻るような動きをすると、再び最初のスライドに来た時の処理が実行されてしまうことです。わかりにくいですが、サンプルのページでコンソールを見ながら、最初のスライド表示時に上に動かしてみてください。ちなみに最後のスライドでも同様です。
      最初のスライド、最後のスライドの時に1回だけ実行したい場合はjQueryのoneや、フラグを使ってなんとかしていただければ。
      サンプル

      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>テスト</title>
      <script src="./common/js/jquery-1.11.1.min.js"></script>
      <style>
      .swiper-slide {
          width: 1000px;
          height: 1000px;
      }
      .test {
          position: absolute;
          top: 0;
          right: 0;
          height: 100px;
          width: 100px;
          background-color: #000;
      }
      </style>
      </head>
      <body>
      <!-- Slider main container -->
      <div class="swiper-container">
          <div class="swiper-wrapper">
              <div class="swiper-slide">ここに1つ目のスライド!</div>
              <div class="swiper-slide">ここに2つ目のスライド</div>
              <div class="swiper-slide">ここに3つ目のスライド</div>
          </div>
      </div>
      <div class="test" data-hash="3"></div>
      <script src="./common/js/swiper.min.js"></script>
      <script>
      var swiper;
      $(window).load(function() {
          swiper = new Swiper('.swiper-container', {
              direction: 'vertical',
              onTransitionEnd: function() {
                  swipe_action();
              }
          });
          $('.test[data-hash]').on('click', function () {
              swiper.slideTo($(this).data('hash'));
          });
          function swipe_action() {
              if (swiper.activeIndex == 1) {
                  console.log("この中に1番目のスライドの処理");
              }
              console.log("今は" + swiper.activeIndex + "番目のスライドです。")
          }
      });
      </script>
      </body>
      </html>
      

      今後ともよろしくお願いします。

  6. お礼が遅くなりまして、すみません。
    なるほど大変わかりやすいご返事ありがとうございました!!
    ソースまでご提示いただき、感謝です!(*’▽’)
    参考にさせていただきます。

  7. swiper新規設置の際に重宝させていただきました。オプションの内容が細かく説明されていてとても参考になります、ありがとうございます。
    ただ、どうしても解決できない問題があり、お手すきの際にご指導いただくことはできませんでしょうか。
    具体的には添付のURLのページですが、ナビゲーションボタンでスライドすると、画像が消えたり再表示されたりします(消えたりするキッカケが不明)。
    オプションやCSSをいじってみたのですが解消されず途方に暮れています。何か考えられる要因があればご指導ください。
    ※URLは非公開にしていただければ幸いです。

    1. コメントありがとうございます!
      URLを拝見させていただきました。
      結論から申し上げますと、LazyLoad.jsの影響です。
      LazyLoadで1pxの画像が本来表示したい画像に変換される前にスライダーが形成されたため不具合が発生しています。
      このURLのサイトの仕様についてはわかりませんが、swiper内の画像を遅延読み込みをさせる場合はswiperのオプションのlazyLoadingを使用してください。
      今後ともよろしくお願いします!

  8. レーウィン様
    早速のご指導ありがとうございます。ブラグインのLazyLoadを無効化したところ不具合なくスライドされるようになりました。一発解決、本当にありがとうございます!
    なお、遅延読み込みの代替案(プラグイン)としてBJ Lazy Loadを有効化しました。同ブラグインならclass指定で部分的に遅延読み込みを除外できそうでしたので。ただ、嬉しい誤算で初期設定のままでも不具合なくスライドされています。
    繰り返しとなりますが、この度はご指導ありがとうございました!

  9. JS初心者なのでとても参考にさせて頂いています。

    Multi Row Slides Layout と zoomを組み合わせようと思っています。
    しかし表示順の問題なのかズーム画像が次の画像の下になってしまいます。
    ソースを見てみたのですが僕には無理そうです。
    解決方法があればご教示いただけないでしょうか・・・

    1. のりさん

      コメントありがとうございます!
      Multi Row Slides Layoutというのは公式デモの10番目にあったものですよね。
      それのオプションにzoom:trueを加えて、slide1の箇所をimgタグに差し替えてみたのですが、問題なく動いてるように感じました。
      一応でこちらで作成したソースをお送りさせていただきますので、ご参考までに

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="utf-8">
          <title>Swiper demo</title>
          <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
      
          <!-- Link Swiper's CSS -->
          <link rel="stylesheet" href="../dist/css/swiper.min.css">
      
          <!-- Demo styles -->
          <style>
          body {
              background: #eee;
              font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
              font-size: 14px;
              color:#000;
              margin: 0;
              padding: 0;
          }
          .swiper-container {
              width: 100%;
              height: auto;
              margin-left: auto;
              margin-right: auto;
          }
          .swiper-slide {
              text-align: center;
              font-size: 18px;
              background: #fff;
              height: 200px;
              
              /* Center slide text vertically */
              display: -webkit-box;
              display: -ms-flexbox;
              display: -webkit-flex;
              display: flex;
              -webkit-box-pack: center;
              -ms-flex-pack: center;
              -webkit-justify-content: center;
              justify-content: center;
              -webkit-box-align: center;
              -ms-flex-align: center;
              -webkit-align-items: center;
              align-items: center;
              position: relative;
              overflow: hidden;
      
          </style>
      </head>
      <body>
          <!-- Swiper -->
          <div class="swiper-container">
              <div class="swiper-wrapper">
                  <div class="swiper-slide"><img src="http://reiwinn-web.net/wp-content/uploads/2016/02/a0002_011891_m-1024x678.jpg" alt=""></div>
                  <div class="swiper-slide"><img src="http://reiwinn-web.net/wp-content/uploads/2016/02/a0002_011891_m-1024x678.jpg" alt=""></div>
                  <div class="swiper-slide"><img src="http://reiwinn-web.net/wp-content/uploads/2016/02/a0002_011891_m-1024x678.jpg" alt=""></div>
                  <div class="swiper-slide"><img src="http://reiwinn-web.net/wp-content/uploads/2016/02/a0002_011891_m-1024x678.jpg" alt=""></div>
                  <div class="swiper-slide"><img src="http://reiwinn-web.net/wp-content/uploads/2016/02/a0002_011891_m-1024x678.jpg" alt=""></div>
                  <div class="swiper-slide"><img src="http://reiwinn-web.net/wp-content/uploads/2016/02/a0002_011891_m-1024x678.jpg" alt=""></div>
                  <div class="swiper-slide"><img src="http://reiwinn-web.net/wp-content/uploads/2016/02/a0002_011891_m-1024x678.jpg" alt=""></div>
                  <div class="swiper-slide"><img src="http://reiwinn-web.net/wp-content/uploads/2016/02/a0002_011891_m-1024x678.jpg" alt=""></div>
                  <div class="swiper-slide"><img src="http://reiwinn-web.net/wp-content/uploads/2016/02/a0002_011891_m-1024x678.jpg" alt=""></div>
                  <div class="swiper-slide"><img src="http://reiwinn-web.net/wp-content/uploads/2016/02/a0002_011891_m-1024x678.jpg" alt=""></div>
              </div>
              <!-- Add Pagination -->
              <div class="swiper-pagination"></div>
          </div>
      
          <!-- Swiper JS -->
          <script src="../dist/js/swiper.min.js"></script>
      
          <!-- Initialize Swiper -->
          <script>
          var swiper = new Swiper('.swiper-container', {
              pagination: '.swiper-pagination',
              slidesPerView: 3,
              slidesPerColumn: 2,
              paginationClickable: true,
              spaceBetween: 30,
              zoom: true
          });
          </script>
      </body>
      </html>
      
  10. レーウィン様
    対応して頂きありがとうございます!
    なぜレーウィンさんのコードのコピペは動いて自分のは動かないのか。
    数時間悩みましたが、jqueryの問題ではなく自分で書いたcssの方の問題でした。。。
    アホですね。
    今回はアホへの優しい対応、本当に感謝です。
    興味のある記事が多いので今後もちょいちょい覗かせてもらいます。
    ありがとうございました!

    のりさん

  11. レーウィン様
    初めまして。
    bxsliderからswipeへ以降したく、貴殿の機能解説参考にさせていただいてます!
    が見つけられなかった部分が2つあるので、ご教授をお願いしたく思います。

    1)基本、自動スライダー使用ですが、
     PCでは「マウスON時はスライダー停止」したいと思っています。
     (bxsliderの autoHover: true,  )

     swiperでも、このoptionはありますか?
     あるようでしたら、ソースを教えてください。

    2)imgを順番通りじゃなく、ランダムに表示させることはできますか?

    以上2点です。
    ご指導のほどよろしくお願いいたしますm(_ _)m

    <現状はこんな感じ↓です>
    —–
    var swiper = new Swiper(‘.swiper-container’, {
    loop: true,
    speed: 1500,
    autoplay: 1500,
    slidesPerView: 3,
    spaceBetween: 0,
    centeredSlides: true,
    grabCursor: true,
    simulateTouch: false,
    autoplayDisableOnInteraction: false,
    pagination: ‘.swiper-pagination’,
    nextButton: ‘.swiper-button-next’,
    prevButton: ‘.swiper-button-prev’
    })
    —–

    1. オオサワさん

      コメントありがとうございます!早速ですがご質問にお答えいたします!

      1) オプションでは存在しませんが、メソッドを使用することで同じことが可能です。(記事では書いてない部分ですみません)
      stopAutoplay()と、startAutoplay()を使用すれば自動再生の停止・再生を制御することができます。

      2) swiperにランダムに並び替えるオプション及びメソッドはありませんのでjavascriptで並び変えるか、jQueryなどを使用してください。
      要素のランダムの並び替えは以下のURLが参考になります。
      http://jsfiddle.net/jBzB4/118/
      今までの経験からの推測ですが、jQueryではappendではなくhtmlで要素を並び替えたものを追加していった方がいいかもです。試してはいませんけれど、おそらく。

      雑なサンプルコードですが、よろしければご参考までに。
      要素のランダム並び替え→swiper生成の順番ができていれば大丈夫だと思います。
      swiper生成→要素のランダム並び替えとなるとまた工夫が必要そうです。

      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>テスト</title>
      <script src="./common/js/jquery-1.11.1.min.js"></script>
      <style>
      .swiper-slide {
          width: 1000px;
          height: 1000px;
      }
      .test {
          position: absolute;
          top: 0;
          right: 0;
          height: 100px;
          width: 100px;
          background-color: #000;
      }
      </style>
      </head>
      <body>
      <!-- Slider main container -->
      <div class="swiper-container">
          <div class="swiper-wrapper">
              <div class="swiper-slide">ここに1つ目のスライド!</div>
              <div class="swiper-slide">ここに2つ目のスライド</div>
              <div class="swiper-slide">ここに3つ目のスライド</div>
          </div>
      </div>
      <script src="./common/js/swiper.min.js"></script>
      <script>
      // ランダムの並び替え
      var divsCollection = $(".swiper-wrapper");
      var container = $(divsCollection).find('.swiper-slide');
      var divs = container.get().sort(function(){
          return Math.round(Math.random());
      });
      $(divsCollection).html(divs);
      
      // swiper生成
      var swiper;
      $(window).load(function() {
          swiper = new Swiper('.swiper-container', {
              direction: 'vertical',
              autoplay: 1000
          });
          $(".swiper-container").mouseenter(function(){
              swiper.stopAutoplay();
          });
      
          $(".swiper-container").mouseleave(function(){
              swiper.startAutoplay();
          });
      });
      </script>
      </body>
      </html>
      

コメントを残す

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

日本語が含まれない投稿は無視されますのでご注意ください。名前及びコメントは必須項目、メールアドレス及びサイトURLは任意です。