3系swiper、4系swiperのオプション記事を以前書いたんだけど、また久しぶりに公式見たら6系まで進んでたから再々記事。
※この記事は実装方法が解説しているというよりは、オプションを実際触ってみてその効果をひたすら書いた記事になります。
以前のバージョンの記事も需要ありそうだから残しておく。
【4系】こちら
【3系】こちら
※2系以前と5系は記事にしてないです。許して。
5系についてはオススメサイトのリンクを貼っておくのでよければこちら参考に!
Web Design Leaves様の5系に関する記事
swiper.jsってなんぞ?
swiper.jsの公式サイト
簡単に言うと、スライダー系のJSプラグイン。スライダーはswiper以外にもいくつかあるけど、中でもオプションが多く、更新も多い個人的にはかなり熱いプラグイン。
このswiper.jsのメリットデメリットはこんな感じ。
メリット
- オプションが非常に多い。スライダーでも一番くらいに多い。コールバック関数(タッチ、クリックなどをした時に関数を実行するもの)の数が特に多い。
- jQueryが不要。なんだかんだプラグインの多くはjQueryが必要になることが多いけど、これは不要。サイトの仕様によっては非常にありがたい。
- スマホにも対応。タッチ、スワイプ、タップにも反応してくれる。
- 特定のボタンを押した時に、特定のスライドに移動するとかそういうのが非常に簡単にできる。
- 開発がかなり活発。更新の頻度が多く、今後もサポートが期待できる。
デメリット
- 最新版のサポートはモダンブラウザのみ。また、IEはサポート外。IEのサポートは4系まで。
- 少しだけ実装に手間がかかる。というか、bxsliderとかが簡単すぎるんだけど。それよりは少し手間がかかる程度。とくにナビゲーションとか。
- 容量がデカめ。
- オプションの書き方や実装の方法がバージョンによって変わるから古い記事を見てると沼にハマる可能性がある。
- オプションの組み合わせによってはバグが起きる。
オプションが多い分、swiper制作者の想定しない実装をするとバグりやすい。
ただ、それを考慮してもかなり使いやすいスライダーだと思う。
実装について
公式ページのここに書いてある。
https://swiperjs.com/get-started/
コマンド使うのが怖いという人もいると思うから、今回は簡単な方法を。
NPMに抵抗ない人は公式を見てくれれば(NPM使える人は英語に抵抗ないだろうし)。
【1-1(1-2とどっちかで)】CDNを使うパターン。
ローカルだったりサーバーの設定次第では起動しない場合があるけど、一番楽。
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
このCSSをheadタグ内に。
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
このJSを/bodyの上に置く。headタグ内じゃなくて/bodyの上だからね!!!(重要)
ちなみに、このリンク先は最新のcssとjsが常に当てられるから、昔は正常だったのに今だとバグっているという場合もあるし、その逆も起きる。
【1-2(1-1とどっちかで)】ローカルで使いたい場合。
CSS JS
上記2つのリンク先にあるコードをコピーしてそれぞれ「swiper-bundle.min.css」「swiper-bundle.min.js」で保存。
(URL先が最新のじゃない場合は、URL飛んだ後、右上のversionを一番下のものにするとそのソースになる。)
設置方法は「1-1」と同じ。CSSはheadタグ内に、JSは/bodyの上に。
【2】swiperを実装したいブロック(divタグ)に.swiper-containerをつける。
【3】div.swiper-containerにdiv.swiper-wrapperを。
【4】さらにその中にdiv.swiper-slideを。ここにコンテンツを入れる。
【5】swipeを実装するための記述とか、オプションを記述するために使うjsを作成する。このjsも/bodyの上・swiper.jsの下に設置する。
これで基本は完成。jQuery使うとこんなん。
<!-- 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をつける場合はdiv.swiper-paginationをdiv.swiper-containerの中に入れてオプションで設定。
次へボタン、前へボタンをつけたい場合はdiv.swiper-button-prev、div.swiper-button-nextをdiv.swiper-containerの中に入れてオプションで設定。
スクロールバーをつけるならdiv.swiper-scrollbarをdiv.swiper-containerの中に入れてオプションで設定。
(div.swiper-containerの中に絶対設置しなければならないというわけではない)
<!-- Slider main container --> <div class="swiper-container"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <div class="swiper-slide">ここに1つ目のスライド!</div> <div class="swiper-slide">ここに2つ目のスライド</div> <div class="swiper-slide">ここに3つ目のスライド</div> </div> <!-- pagination --> <div class="swiper-pagination"></div> <!-- navigation buttons --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- scrollbar --> <div class="swiper-scrollbar"></div> </div>
これらコントロール系は普通に実装するとデフォルトのデザインになっちゃうから、注意。
オリジナルデザインにする一番簡単な方法はcssの上書き。上書きする場合はcssの読み込み順やネストに注意。
オプションについて
ここからが本題。このオプションを使わないとわざわざswiper.jsを使う理由ないからね!
オプションのつけ方はこんな感じ
var swiper; $(window).load(function() { swiper = new Swiper('.swiper-container', { speed: 400, pagination: { el: '.swiper-pagination', clickable: true }, slidesPerView: 1, loop: true, on: { slideChange: function () { console.log('swiper slideChange'); }, } }); });
コールバック(例で言うと、slideChange)はfunction(){}を書いて、その中に処理したい内容を記述する。
あと、paginationとかの一部のオプションは{}で囲んで中にさらにオプションを書いていく。
それ以外は数値とか、指定された文字列、真偽を入れるって感じ。
コールバックに関しては、簡単なやつなら直接書いてもいいけど、長い処理の場合は別でfunction用意しておいて、それを実行する、
function start_alert() { alert("touchstart!!"); } // 中略 swiper = new Swiper('.swiper-container', { on: { slideChange: function () { start_alert(); }, } });
こんな感じで書いた方がいいと思う。その方がわかりやすいし。
ページが長くなりすぎたから、よく使うやつだけアンカーリンクしとく。ここに無いやつはブラウザの検索機能とかで頑張ってもろて。
speed(スライドするスピード)
spaceBetween(スライド間の隙間を設定)
slidesPerView(1画面に何枚スライドを入れるか設定)
slidesPerGroup(複数のスライドをグループ化)
touchAngle(スライドをスワイプできる角度を設定)
resistanceRatio(バウンスの量を設定できる)
loop(ループ)
realIndex(現在表示してるスライドの番目を取得)
プロパティ(スライダーの情報を取得)
各種メソッド(jsでスライドを操作する)
各種イベント(~した時に関数を実行)
ナビゲーション(左右の次へ前へボタン)
ページネーション(下の丸が並んでるやつ)
自動再生
フェードに変更
以下、オプションの流し込み
基本オプション
init
真偽。
init: true
swiperが生成された時に、swiperを初期化するかどうか。true推奨。
デフォルトではtrue。
updateOnWindowResize
真偽。
updateOnWindowResize: true
swiperをリサイズした時にサイズ・位置を再計算するかどうか。true推奨。
デフォルトではtrue。
initialSlide
数。
initialSlide: 0
一番最初に表示させるスライドの番号(0スタート)。
デフォルトでは0。
direction
文字列。
initialSlide: 'horizontal'
スライドの方向。横(horizontal)か縦(vertical)か。
デフォルトでは横(horizontal)。
speed
数。
speed: 'horizontal'
スライドの速度。数字が大きければ遅く、小さければ早くなる。ミリ秒。
デフォルトでは300。
setWrapperSize
真偽。
setWrapperSize: false
.swiper-wrapperに全てのスライドの合計の幅(もしくは高さ)がpxでセットされる。width300pxのスライドが5枚の場合、.swiper-wrapperのwidthは1500pxになる。
デフォルトではfalse。
virtualTranslate
真偽。
virtualTranslate: false
trueにすると.swiper-wrapperのtransformが削除される。普通にスッと移動するスライドじゃなくて、凝ったアニメーションでの遷移をしたい場合に使用する。CSS・JSでのアニメーションの知識が必要。
デフォルトではfalse。
width
数。
width: 400
スライドの幅を指定する…んだけど、応答しなくなるらしい。バグなのか謎。個人的には設定しないことを推奨。幅を固定したい場合はcssでやった方がいいかも。
デフォルトでは何も設定されていない。100%みたいな感じ(厳密には少し違うけど)。
height
数。
height: 400
スライドの高さを指定する…んだけど、応答しなくなるらしい。バグなのか謎。個人的には設定しないことを推奨。高さを固定したい場合はcssでやった方がいいかも。
デフォルトでは何も設定されていない。100%みたいな感じ(厳密には少し違うけど)。
autoHeight
真偽。
autoHeight: false
trueにすると、.swiper-wrapperの高さがslideの中身ぴったりになる。それぞれ中身の高さが違う場合、スライドするたびに、次のスライドの高さに自動で数字が変わる。汚く見えるから、あまりtrueにすることは少ないと思う。
デフォルトではfalse。
roundLengths
真偽。
roundLengths: false
trueにすると、中のテキストや画像をぼやけないように調整してくれる。
内部的なことで説明すると、.swiper-slideのwidthやheightで小数点以下がなくなる。切り上げなのか、切捨てなのか、四捨五入なのかはめんどくさかったので調べてないです。
通常はfalseで、ぼやける不具合が出た時に初めてtrueにするってした方がいいかも。あと、なんか不具合起きてる時になんとなくつけてみるとうまくいく時があるらしい(この使い方はあまりお勧めできないけれど)。
デフォルトではfalse。
nested
真偽。
nested: false
trueにすると、入れ子になったSwiper(つまり、Swiperの中でさらにSwiperを使っている時)のタッチイベントが正常に取れるようになる。
デフォルトではfalse。
uniqueNavElements
真偽。
uniqueNavElements: true
paginationやnext-button等、コントロール系とスライドを自動で結びつける。1個目のpaginationをクリックしたら1番目のスライドに行く、といった動作。true推奨。
デフォルトではtrue。
effect
“slide”, “fade”, “cube”, “coverflow” もしくは “flip”
effect: "fade"
どのようにスライドアニメーションするか設定できる。
slideは普通に横や縦に流れるスライド、fadeはだんだん透明になる感じのスライド、cube・coverflow・flipは実際に見た方が早いかもだけど実用性は低い。
デフォルトでは”slide”。
runCallbacksOnInit
真偽。
runCallbacksOnInit: false
スワイパーを初期化した時にコールバックを発火させるかどうか。初期化というのはリセットもそうだけど、最初の読み込み時も含まれるし、ループをしている時に最後のスライドから最初のスライドに戻った時も発火する。
例えば、「slideChangeTransitionStart」が最初の読み込み時にも発火する。基本的にはtrueで問題ないと思う。
デフォルトではtrue。
watchOverflow
真偽。
watchOverflow: false
スライドの枚数がスライダー生成の条件に満たさない時(わかりやすい話、1枚しかスライドがないとか)、コントロール関係を削除してスライド機能もなくす。ワードプレスに組み込むときとかtrueにしていいと思う。
デフォルトではfalse。
userAgent / url
文字列。
この2つはSSR(サーバーサイドレンダリング)に関するオプション。
SSRはざっくり言うとサーバー側でHTMLを作ってユーザーに渡すもので、読み込みが早くなる技術の1つ。
それを使う時のサーバーとユーザーの橋渡しとしてこの2つのオプションがある。
具体的にどうするかは自分も現状だとわからないので誰か記事にしてくれるとリンク貼ります(すみません)
on
イベントの登録に使う。詳細はページ下部のイベントに関する項目にて。
cssMode
cssMode
真偽。
trueにするとCSS Scroll Snapが反映されるようになる。
今までswiper側でやっていたことがcss側でやることでパフォーマンスが向上するってことだと思う。
ただし、特定のオプションが設定されている場合、このオプションは無効になる。
cssでやる部分が生まれるってことで恐らく動きに若干差が出る可能性があるのでtrueにした場合はきちんと動作チェックすることを推奨。
デフォルトではfalse。
Slides grid
spaceBetween
数。
spaceBetween: 10
スライドの間の距離を設定できる。
デフォルトでは0。
slidesPerView
数字もしくはauto。
slidesPerView: 3
1画面で見えるスライドの数を設定できる。loopを設定したい場合は、一緒にloopedSlidesの設定をする必要がある。slidesPerView:autoとslidesPerColumnは一緒に設定してはいけない。
また、effectで”slide”と”coverflow”以外では動作しない。
デフォルトでは1。
slidesPerColumn
数。
slidesPerColumn: 3
列ごとのスライド数。独自のスライドの動きと合わせたりすると面白い。
デフォルトでは1。
slidesPerColumnFill
文字列。
slidesPerColumn: 'row'
columnもしくはrow。slidesPerColumnなどを実装した際に、どのようにして埋めるかを設定できる。列をベースに埋めるか、行をベースに埋めるか。
デフォルトではcolumn。
slidesPerGroup
数。
slidesPerGroup: 2
複数のスライドを1つにまとめる。スワイプした際にグループで囲った全てが同時にスライドする。実質slidesPerViewが2以上前提な気がする。
デフォルトでは1。
slidesPerGroupSkip
数。
slidesPerGroupSkip: 1
slidesPerGroupでグループ化したくないスライドを除外する。
指定した数字以下のスライドはグループ化されない。特定のスライドってわけじゃなくて、数字以下全てってなるから使い勝手は微妙かもしれない。
デフォルトでは0。
centeredSlides
真偽。
centeredSlides: true
trueにすると、スライドのスタート(デフォルトでは0枚目)が左端じゃなくて真ん中になる。実質slidesPerViewが3以上の奇数前提な気がする。
例えば、slidesPerViewが3の時はslide1が真ん中にくる。左には何もない、右にはslide2がある状態。
デフォルトではfalse。
centeredSlidesBounds
真偽。
centeredSlidesBounds: true
最初と最後の時に空白がなくなる。
例えば、slidesPerViewが3の時はslide2が真ん中にくる。左にはslide1、右にはslide3がある状態。
これだと普通にslidesPerView3に設定した時と変わらんやんけって思うけど、activeなスライドは2になるのが違う点。
cssで真ん中だけ変えたい時に使えるオプション。ただし、これを使用するとloop及びpaginationは使用できなくなる。
デフォルトではfalse。
slidesOffsetBefore
数。
slidesOffsetBefore: 10
全てのスライドの前に追加で余白を設ける。余白は1つ分のスライドとして認識される。それぞれのスライドは余白分ずれて見える。ピクセル。
デフォルトでは0。
slidesOffsetAfter
数。
slidesOffsetAfter: 10
全てのスライドの最後に追加で余白を設ける。余白は1つ分のスライドとして認識される。ピクセル。
デフォルトでは0。
normalizeSlideIndex
真偽。
normalizeSlideIndex: true
例えば、slidesPerGroupを3にしていてcenteredSlidesを使っている時に、1枚目が3枚目として認識されているのをtrueだと1枚目として認識してくれるようになる。
公式参考URL https://github.com/nolimits4web/Swiper/pull/1766
slidesPerViewとかslidesPerGroupを使用するならtrueにしてもいいんじゃないかな。
デフォルトではtrue。
centerInsufficientSlides
真偽。
centerInsufficientSlides: true
slidesPerViewで設定した数よりも実際のスライド枚数が少ない時、スライドが中央に配置されるようになる。
slidesPerViewで4を設定していたが、実際には3枚しかスライドを設定していなかった場合、
スライドの表示されるところに3枚がセンタリングして配置される。それぞれの幅は4枚の時と同じ幅になり、左右に余白ができる。
中央に幅25%のスライドが3枚あって、左右に12.5%の余白ができるってことになる。
デフォルトではfalse。
カーソル関係
grabCursor
真偽。
grabCursor: true
カーソルがグローブになる。少しユーザビリティが向上するかもしれない。
デフォルトではfalse。
タッチ(スマホ)
touchEventsTarget
文字列。
touchEventsTarget: wrapper
containerもしくはwrapper。タッチイベントの対象をどちらにするか選択できる。基本containerでいいと思う。
デフォルトではcontainer。
touchRatio
数。
touchRatio: 1
しきい値。どのくらいスワイプしたら次のスライドに行くかを設定できる。数字が大きければ少しのスワイプで次に行く。スライドのサイズに応じて設定した方がいい。
デフォルトでは1。
touchAngle
数。
touchAngle: 45
スワイプを認識する角度を設定できる。スライドのサイズが大きいなら数字を大きくした方がいい。
デフォルトでは45。
simulateTouch
真偽。
simulateTouch: true
trueだとタッチイベントをマウスイベントのように認識するようになる。スマホと仕様を変更するとかじゃない限り、falseにする意味はそんなない気がする。
デフォルトではtrue。
shortSwipes
真偽。
shortSwipes: true
時間の短いスワイプを無効にする場合はfalseを設定する。基本デフォルト推奨。
デフォルトではtrue。
longSwipes
真偽。
longSwipes: true
時間の長いスワイプを無効にする場合はfalseを設定する。基本デフォルト推奨。
デフォルトではtrue。
longSwipesRatio
数字。
longSwipesRatio: 0.4
時間の長いスワイプをした時に、どのくらい次(もしくは前)のスライドが見えてたら次(もしくは前)のスライドに行くかを設定できる。個人てきには0.4くらいが好き。
デフォルトでは0.5。
longSwipesMs
数。
longSwipesMs: 300
時間の長いスワイプをした時に、どのくらい経過したら次(もしくは前)のスライドへ行くのをキャンセルするかを設定できる。ミリ秒。
デフォルトでは300。
followFinger
真偽。
followFinger: true
falseだとスワイプした時に次のスライドや前のスライドが見えるような動きをキャンセルできる。true推奨。
デフォルトではtrue。
allowTouchMove
真偽。
allowTouchMove: true
スワイプを可能にするかどうか。falseだとナビゲーションやslideNext()等でしかスライドできなくなる。
全画面スマホではありかも?昔はonlyExternalってオプションだった。
デフォルトではtrue。
threshold
数。
threshold: 100
しきい値。この数値よりスワイプ距離が短い場合、スライダーは動かない。ピクセル。
デフォルトでは0。
touchStartPreventDefault
真偽。
touchStartPreventDefault: true
touchstart(mousedown)のイベントのバブリングを防ぐ。デフォルト推奨。
デフォルトではtrue。
touchStartForcePreventDefault
真偽。
touchStartForcePreventDefault: true
touchstart(mousedown)のイベントをallowTouchMove:falseの時でも無効にするかどうか。
allowTouchMoveを設定する時に場合によっては設定することがあるかも?
デフォルトではfalse。
touchMoveStopPropagation
真偽。
touchMoveStopPropagation: true
trueにすることでイベントのバブリングを防ぐ。デフォルト推奨。
デフォルトではtrue。
iOSEdgeSwipeDetection
真偽。
iOSEdgeSwipeDetection: false
iOSのUIWebViewにおいてスワイプのイベントを有効にするための設定。らしい。
デフォルトではfalse。
iOSEdgeSwipeThreshold
数。
iOSEdgeSwipeThreshold: 20
iOSのUIWebViewにおいてここで画面左端から設定した数より小さい数の範囲ではスワイプのイベントが有効にならない。らしい。
デフォルトでは20。
touchReleaseOnEdges
真偽。
touchReleaseOnEdges: true
trueだとスライダーをスワイプでスライドさせている時にも画面がスクロールされるようになる。
フルスクリーンとかに。
デフォルトではfalse。
passiveListeners
真偽。
passiveListeners: true
スマホでのパフォーマンスを高める。基本デフォルトでいいと思うけどe.preventDefaultを使用する場合は競合してしまうため、こちらをfalseにする必要がある。らしい。
デフォルトではtrue。
抵抗・バウンス関係
resistance
真偽。
resistance: true
trueだと最後のスライドもしくは最初のスライドで次に行こうとする時に発生するバウンスアニメーションに抵抗力がつくようになる。
デフォルトではtrue。
resistanceRatio
数。
resistanceRatio: 0.85
抵抗力(バウンスの量)を強めたり弱めたりできる。
デフォルトでは0.85。
スワイプ
preventIntercationOnTransition
真偽。
preventIntercationOnTransition: true
スワイプしてる最中に別のスライドに移動することができなくなる。遷移アニメーションによっては便利。
デフォルトではfalse。
allowSlidePrev
真偽。
allowSlidePrev: true
falseだとスワイプで前に戻る動きができなくなる。昔はallowSwipeToPrevってオプションだった。
デフォルトではtrue。
allowSlideNext
真偽。
allowSlideNext: true
falseだとスワイプで次行く動きができなくなる。昔はllowSwipeToNextってオプションだった。
デフォルトではtrue。
noSwiping
真偽。
noSwiping: true
trueだとnoSwipingClassで指定したクラスを持ったスライドはスワイプの操作が効かなくなる。
デフォルトではtrue。
noSwipingClass
文字列
noSwipingClass: 'no-swipe'
noSwipingがture前提。ここで指定したクラス名を持ったスライドはスワイプの操作が効かなくなる。.はいらない。
デフォルトでは’swiper-no-swiping’。
noSwipingSelector
文字列
noSwipingSelector: 'input'
特定のセレクタの上ではスワイプを無効にしたい!って時に。スライド内で操作することがあるなら、これを使ってみるとユーザビリティが向上するかも。
デフォルトでは特になし。
swipeHandler
文字列(htmlElement)
swipeHandler: '.swipe-handler'
ここで指定したクラス上、もしくはタグ上でしかスワイプ操作が効かなくなる。
デフォルトでは’null’。
クリック
preventClicks
真偽。
preventClicks: true
スワイプ中での不要なクリックを無効にできる。ユーザビリティ的にtrue推奨。
デフォルトではtrue。
preventClicksPropagation
真偽。
preventClicksPropagation: true
スワイプ中のクリックイベントを無効にできる。ユーザビリティ的にtrue推奨。
デフォルトではtrue。
slideToClickedSlide
真偽。
slideToClickedSlide: false
スワイプ中にクリックした時、今の動きをキャンセルしてクリックした側のスライドに移動する。ゆっくりなスライダーでない限り、ユーザビリティ的にfalse推奨。
デフォルトではfalse。
freeMode
freeMode
真偽。
freeMode: true
これをtrueにすると、スワイプした際にスライドぴったりに止まらなくなる。固定位置がなくなるというかなんというか。区切りがなくなるというか。すーっといくというか。
フルスクリーンでこれやると面白アプリケーション風サイトが作れるかも。
デフォルトではfalse。
freeModeMomentum
真偽。
freeMode: true
freeModeがtrue前提。trueだと、FreeModeでのスワイプ時に慣性スクロールみたいなのが働くようになる。これtrueじゃないとfreeMode使う理由薄そうな感じするけど、どうなんだろう。
デフォルトではtrue。
freeModeMomentumRatio
数。
freeModeMomentumRatio: 1
freeModeMomentumがtrue前提。数字を大きくすれば、慣性スクロール的なやつの距離を延ばせる。
デフォルトでは1。
freeModeMomentumVelocityRatio
数。
freeModeMomentumVelocityRatio: 1
freeModeMomentumがtrue前提。数字を大きくすれば、慣性スクロール的なやつの速度を早くできる。
デフォルトでは1。
freeModeMomentumBounce
真偽。
freeModeMomentumBounce: true
freeModeMomentumがtrue前提。trueだと一番最後のスライドに行った時にバウンスする感じのアニメーションが起きる。
デフォルトではtrue。
freeModeMomentumBounceRatio
数。
freeModeMomentumBounceRatio: 1
バウンスする時のエフェクトを調整できる。数字が大きいと跳ね返りの白いところが大きくなる。
デフォルトでは1。
freeModeMinimumVelocity
数。
freeModeMinimumVelocity: 0.02
freeModeMomentumがtrue前提。freeModeを開始するトリガーとなるスワイプの最小速度を設定できる。
デフォルトでは0.02。
freeModeSticky
真偽。
freeModeSticky: true
freeModeがtrue前提。trueだと、freeModeで慣性が切れる着地点に対して一番近い固定位置に収まるようになる。スナップが有効になる。
デフォルトではfalse。
進捗
watchSlidesProgress
真偽。
watchSlidesProgress: true
進捗状態を計算するオプション、らしい。でもその数字がどこで取れるのかわからない。自分の中では、後述するwatchSlidesVisibilityのオプションの前提オプションって認識。
デフォルトではfalse。
watchSlidesVisibility
真偽。
watchSlidesVisibility: true
watchSlidesProgressがtrue前提。trueにすると画面に表示されているスライドにswiper-slide-visibleのクラスが追加される。複数表示されている場合は、そのすべてにこのクラスがつく。
これで複雑な動きどうこうというより、検証用のオプション。
画像関係
preloadImages
真偽。
preloadImages: true
プリロード。事前にスライドで使う画像を読み込んでおくもの。
デフォルトではtrue。
updateOnImagesReady
真偽。
updateOnImagesReady: true
preloadImagesがture前提。画像が全て読み込んだらスライドを初期化する。true推奨。
デフォルトではtrue。
ループ
loop
真偽。
loop: true
trueだとループするようになる(最後のスライドの時にnextのボタンを押したりすると最初のスライドに行く。逆も同様)。これを設定した際、正面のスライドに.swiper-slide-duplicate-activeが、次のスライドに.swiper-slide-duplicate-nextが、前のスライドに.swiper-slide-duplicate-prevが追加される。また、複製されたスライドにはすべて.swiper-slide-duplicateのクラスが追加されている。
デフォルトではfalse。
loopAdditionalSlides
数。
loopAdditionalSlides: 0
ループ作成時に作成されるクローンの枚数。見た目では特に変化せず、ソースコード上で変わる。
デフォルトでは0。
loopedSlides
数。
loopedSlides: 5
slidesPerviewがautoの時に、ループする数を設定する際に使用する。
デフォルトではnull。
loopFillGroupWithBlank
真偽。
loopFillGroupWithBlank: true
slidesPerGroupを使用していて、スライドの枚数が足りなくてループどうしよう!って時に。足りない分を空白のスライダーで埋めてくれる。
正直、その状況自体があまり良くないような気がするが、システムでは使う機会があるかもしれない。
デフォルトではfalse。
loopPreventsSlide
真偽。
loopPreventsSlide: true
スライドアニメーションが実行されると、前のスライドアニメーションがキャンセルされる・・・らしい。
swiperのオリジナルスライドアニメーションを組んでいる場合はもしかしたらfalseにする機会があるかもしれない。基本デフォルト推奨。
デフォルトではtrue。
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 } } })
昔は「以下」だったと思うけど、いつの間にか「以上」になっていた。注意。
ちなみに、幅/高さの比率でもbreakpointsは設置できる。
var swiper = new Swiper('.swiper-container', { slidesPerView: 1, spaceBetween: 10, breakpoints: { '@0.75': { slidesPerView: 2, spaceBetween: 20, }, '@1.00': { slidesPerView: 3, spaceBetween: 40, }, '@1.50': { slidesPerView: 4, spaceBetween: 50, }, } });
@以下に幅/高さの値を入れる。これも「以上」で判定。
Observer
observer
真偽。
observer: true
スライド作成後にスタイルの変更やスライドの表示非表示を変更する時に、falseだと崩れるけど、スライドを初期化して対応するようになる。その分、少し重くなる印象。
デフォルトではfalse。
observeParents
真偽。
observeParents: true
スライドの親要素にもobserverが適応されるようになる。observerがtrueならこちらもtrueがいいと思う。
observeSlideChildren
真偽。
observeSlideChildren: true
スライドの子要素にもobserverが適応されるようになる。observerがtrueならこちらもtrueがいいと思う。
各クラス名の設定(複数人での管理がしにくくなるためデフォルト推奨)
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’。
slideBlankClass
loopFillGroupWithBlankで生成される空白のスライドにつくクラス。
デフォルトでは’swiper-slide-invisible-blank’
wrapperClass
ラッパーにつくクラス。
デフォルトでは’swiper-wrapper’。
プロパティ関係
mySwiper.params
mySwiper.params.speed = 500; mySwiper.params.autoplay.delay=500;
パラメータを追加したり、上書きするときに。
mySwiper.$el
mySwiper.$el.style.opacity=0.5;
スライダーのコンテナのHTML要素を取得できる。クラス追加したりcss当てたり。
mySwiper.$wrapperEl
mySwiper.$wrapperEl.addClass('my-class');
スライダーのラッパーを取得できる。クラス追加したりcss当てたり。
mySwiper.slides
console.log(mySwiper.slides.length); mySwiper.slides[0].style.opacity=0.5;
スライドの配列を取得できる。
mySwiper.slides.lengthでスライドの枚数を数えられる。
mySwiper.slides[0]で最初のスライドにあれこれできる。
mySwiper.width
console.log(mySwiper.width);
スライダーの横幅を取得できる。
mySwiper.height
console.log(mySwiper.height);
スライダーの高さを取得できる。
mySwiper.translate
console.log(mySwiper.translate);
初期状態からどのくらい移動したかのpxを返す。どんどんマイナスで増えてく。
mySwiper.progress
console.log(mySwiper.progress);
進行度について返してくれる。
例えば、スライドが10枚あるとしたら、1枚目のときは0.1、3枚目のときは0.3、8枚目のときは0.8、10枚目のときは1を返す。
mySwiper.activeIndex
console.log(mySwiper.activeIndex);
現在表示されてるスライドが何番目かを返す。
if(mySwiper.activeIndex == 3){}とかで現在表示されてるスライドに対しての分岐が可能。
ループ設定をしている場合、コピーした分もカウントに含まれる。
mySwiper.realIndex
console.log(mySwiper.realIndex);
現在表示されてるスライドが何番目かを返す。
if(mySwiper.realIndex == 3){}とかで現在表示されてるスライドに対しての分岐が可能。
ループ設定をしていても、コピーした分もカウントに含まれない。
mySwiper.previousIndex
console.log(mySwiper.previousIndex);
前回のスライドが何番目かを返す。
前回のスライドが存在しない場合は今のスライドの番号を返す。
mySwiper.isBeginning
console.log(mySwiper.isBeginning);
今のスライドが横スライドであるなら一番左のときに、縦スライドであるなら一番上のときにtrueを返す。
mySwiper.isEnd
console.log(mySwiper.isEnd);
今のスライドが横スライドであるなら一番右のときに、縦スライドであるなら一番下のときにtrueを返す。
mySwiper.animating
console.log(mySwiper.animating);
スライド中のときはtrueを返す。
mySwiper.touches
console.log(mySwiper.touches.startX); console.log(mySwiper.touches.startY ); console.log(mySwiper.touches.currentX); console.log(mySwiper.touches.currentY); console.log(mySwiper.touches.diff);
タッチした位置やクリックした位置を取得できる。
mySwiper.clickedIndex
console.log(mySwiper.clickedIndex);
クリックしたスライドが何番目かを返す。
mySwiper.clickedSlide
mySwiper.clickedSlide.style.height='400px';
最後にクリックしたスライド(HTML)を返す。クリックしたスライドがない場合はエラーが出る(スライダーに影響が出ることはないけど、コンソールにはエラーがでる)。
mySwiper.allowSlideNext
mySwiper.allowSlideNext= false;
falseにすると、次のスライドにいけなくなる。
mySwiper.allowSlidePrev
mySwiper.allowSlidePrev= false;
falseにすると、前のスライドにいけなくなる。
mySwiper.allowTouchMove
mySwiper.allowTouchMove= false;
falseにすると、タッチ・クリックでのスワイプができない。コントローラー系は変わらず操作できる。
メソッド関係
mySwiper.slideNext(speed, runCallbacks);
次のスライドに行く。speedとcallbacksは任意なのでmySwiper.slideNext()で動く。
ボタンのonclickでこれ使うとか。
mySwiper.slidePrev(speed, runCallbacks);
前のスライドに行く。speedとcallbacksは任意なのでmySwiper.slideNext()で動く。
ボタンのonclickでこれ使うとか。
mySwiper.slideTo(index, speed, runCallbacks);
mySwiper.slideTo(3);
指定した順番のスライドに移動する。indexだけ必須。
mySwiper.slideToLoop(index, speed, runCallbacks);
mySwiper.slideToLoop(3);
基本、slideToと同じ。loop設定時はこっちのがいいかも。
mySwiper.slideReset(speed, runCallbacks);
現在アクティブになっているスライドに位置をリセットする。
アクティブなスライドというのはアクティブのクラスがついているスライドのこと。
freeMode使用時に使うものかもしれない。
mySwiper.slideToClosest(speed, runCallbacks);
現在の位置から見て一番近いスライドをアクティブにしてその位置に対してスナップする。
freeMode使用時に使うものかもしれない。
mySwiper.updateAutoHeight(speed);
autoHeightがtrueになっている場合、これを実行すると高さが更新される。
jsでスライドの中身を入れ替えたりした時に使うかもしれない。
mySwiper.update();
swiperのオプション以外でスライドを削除したりした場合はこれを実行してスライダーが正常に動くようにする。
mySwiper.changeDirection();
スライダーの方向を水平から垂直に変更する。
()の中に’horizontal’か’vertical’を入れればその方向になるが、何も入れない場合は今とは違う方が反映される。horizontalの時はverticalに、verticalの時はhorizontalに。
mySwiper.detachEvents();
イベントリスナーが働かなくなる。
mySwiper.attachEvents();
イベントリスナーが働くようになる。detachEventsで無効にしたあと、これで元に戻すとか。
mySwiper.destroy(deleteInstance, cleanStyles);
スライダーとしての全ての機能を削除する。スライドもしなくなるし、イベントリスナーも動かない。
mySwiper.appendSlide(slides);
mySwiper.appendSlide('<div class="swiper-slide">Slide 10"</div>') mySwiper.appendSlide([ '<div class="swiper-slide">Slide 10"</div>', '<div class="swiper-slide">Slide 11"</div>' ]);
スライドを後ろに追加する。
mySwiper.prependSlide(slides);
mySwiper.prependSlide('<div class="swiper-slide">Slide 1"</div>') mySwiper.prependSlide([ '<div class="swiper-slide">Slide 1"</div>', '<div class="swiper-slide">Slide 2"</div>' ]);
スライドを前に追加する。
mySwiper.addSlide(index, slides);
mySwiper.addSlide(1, '<div class="swiper-slide">Slide 10"</div>') mySwiper.addSlide(1, [ '<div class="swiper-slide">Slide 10"</div>', '<div class="swiper-slide">Slide 11"</div>' ]);
特定の位置にスライドを追加する。例だと1番目にその後のスライドを追加している。
mySwiper.removeSlide(slideIndex);
mySwiper.removeSlide(0); //remove first slide mySwiper.removeSlide([0, 1]); //remove first and second slides
特定の順番のスライドを削除する。
mySwiper.removeAllSlides();
全てのスライドを削除する。
mySwiper.setTranslate(translate);
mySwiper.setTranslate(-300);
スライドの現在位置(一番左から計算してのpx)から移動する。
mySwiper.getTranslate();
スライドの現在位置(一番左から計算してのpx)を取得する。
mySwiper.translateTo(translate, speed, runCallbacks, translateBounds);
スライドのアニメーションを実行する。
一部のスライドだけ違うアニメーションをしたい時に設定するもの。
mySwiper.on(event, handler);
イベントを追加する。イベントに関してはすぐ下のものを参照。
mySwiper.once(event, handler);
1つ前のonと違い、1回だけ実行するイベントを追加するもの。
mySwiper.off(event, handler);
イベントの中の特定のイベントリスナーだけオフにしたい時に使用する。
mySwiper.off(event);
イベントをオフにしたい時に使用するもの。
mySwiper.unsetGrabCursor();
カーソルのグラブを解除する。
mySwiper.setGrabCursor();
カーソルのグラブを有効にする。
(disableMousewheelControl、enableMousewheelControl、disableKeyboardControl、enableKeyboardControlは削除されたみたい)
イベント関係
イベント登録の方法は2つ。昔はon~だったんだけど、仕様変更があった。
1 オプションの中に入れる
var mySwiper = new Swiper('.swiper-container', { on: { init: function () { console.log('swiper initialized'); }, }, };
2 メソッドで追加する
var mySwiper = new Swiper('.swiper-container', { // ... }; mySwiper.on('slideChange', function () { console.log('slide changed'); });
以下、イベント。
init
スワイパー初期化直後に実行される。メソッドで書く場合はオプションにinit: falseを設定する必要がある。正直めんどいからオプションに入れるようにした方がいいと思う。
var swiper = new Swiper('.swiper-container', { init: false, // other parameters }) swiper.on('init', function() { /* do something */ }); // init Swiper swiper.init();
var swiper = new Swiper('.swiper-container', { // other parameters on: { init: function () { /* do something */ }, } });
beforeDestroy
スワイパーをdestroyした直後に実行される。
slideChange
スライドが変更されたときに実行される。
slideChangeTransitionStart
次のスライドに行く際、スライドアニメーションが開始されたときに実行される。
slideChangeTransitionEnd
次のスライドに行く際、スライドアニメーションが終了されたときに実行される。
slideNextTransitionStart
後ろの方のスライドへのアニメーションが開始されたときに実行される。
最初のスライドから2番目のときは実行されるけど、2番目から最初のスライドのときは実行されない。
slideNextTransitionEnd
後ろの方のスライドへのアニメーションが終了されたときに実行される。
最初のスライドから2番目のときは実行されるけど、2番目から最初のスライドのときは実行されない。
slidePrevTransitionStart
前の方のスライドへのアニメーションが開始されたときに実行される。
最初のスライドから2番目のときは実行されないけど、2番目から最初のスライドのときは実行される。
slidePrevTransitionEnd
前の方のスライドへのアニメーションが終了されたときに実行される。
最初のスライドから2番目のときは実行されないけど、2番目から最初のスライドのときは実行される。
transitionStart
スライドアニメーションが開始されたときに実行される。
transitionEnd
スライドアニメーションが終了されたときに実行される。
touchStart
タッチを開始したときに実行される。
touchMove(event)
タッチした後指(カーソル)を動かす度に実行される。
touchMoveOpposite
指(カーソル)を動かしたけどスライドが動かなかった際に実行される。
sliderMove
指(カーソル)を動かしてスライダーを移動したときに実行される。
touchEnd
指(クリック)を離すと実行される。
click
クリックした時に実行される。
tap
タップしたときに実行される。
doubleTap
ダブルタップしたときに実行される。
imagesReady
スライダーの画像が全て読み込まれたときに実行される。
progress
progress: function(progress){ console.log(progress); },
swiperの進捗を読んでくれる。
reachBeginning
初期位置に到着すると実行される。
reachEnd
最後のスライドに到達すると実行される。
fromEdge
最初のスライドもしくは最後のスライドから移動するときに実行される。
toEdge
最初のスライドもしくは最後のスライドに移動したときに実行される。
setTranslate
.swiper-wrapperのtransformの数値が変更されたときに実行される。
resize
スライダーにリサイズが発生したときに実行される。
observerUpdate
observerがtrueになっていて、observerが実行される時にこれも実行される。
beforeLoopFix
loopを設定していた場合、次のスライドに行く時に実行される。
loopFix
loopを設定していた場合、次のスライドに行く時に実行される。
beforeLoopFixより後に実行される。
breakpoint
breakpointsによって切り替えが発生した時に実行される。
ナビゲーション
ナビゲーションはまず
var mySwiper = new Swiper('.swiper-container', { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, });
で、設置したdivタグをナビゲーションとして認識させる必要がある。
以下、navigation:{}内に書くオプション。
nextEl
文字列(クラス名)
nextEl: '.swiper-button-next'
次へボタンを認識させる。
prevEl
文字列(クラス名)
prevEl: '.swiper-button-prev'
前へボタンを認識させる。
hideOnClick
真偽。
hideOnClick: false
trueだと、次のスライドが無いときに、nextElで設定したHTMLが薄くなる。
また、前のスライドが無いときに、prevElで設定したHTMLが薄くなる。
デフォルトではfalse。
disabledClass
文字列(クラス名)
disabledClass: 'swiper-button-disabled'
次のスライドが無いときに、nextElで設定したdivにクラスがつく。
また、前のスライドが無いときに、prevElで設定したdivにクラスがつく。
デフォルトであるから、そんなにいじる理由もない気はする。2つスライダー置いてるときとか?
デフォルトでは’swiper-button-disabled’
hiddenClass
文字列(クラス名)
hiddenClass: 'swiper-button-hidden'
hideOnClickがtrue前提。薄くなったナビゲーションにつくクラスを指定できる。
lockClass
lockClass: 'swiper-button-lock'
ナビゲーションがオプションによって無効にされている時につくクラス。を指定できる。
以下、メソッドとオプション。使い方はメソッドのところ見てね。
mySwiper.navigation.nextEl
次へボタンのHTMLを取得できる。
mySwiper.navigation.prevEl
前へボタンのHTMLを取得できる。
mySwiper.navigation.update();
ナビゲーションの状態を更新する。
ページネーション関係
ページネーション(pagination、pager)はまず
var mySwiper = new Swiper('.swiper-container', { pagination: { el: '.swiper-pagination', type: 'bullets', }, });
で、設置したdivタグをページネーションとして認識させる必要がある。
以下、pagination:{}内に書くオプション。
el
文字列(クラス名)
el: '.swiper-pagination'
ページネーションとして認識させる。
type
type: 'bullets'
‘bullets’、’fraction’、’progress’もしくは’custom’。
paginationの形の種類を選択できる。丸い円か、数字か、barか、カスタム。progressは結構かっこいい。
bulletElement
文字列(htmlElement)
bulletElement: 'span'
ページネーションを構成するタグを選択できる。liとかにしたいなら。
dynamicBullets
真偽。
dynamicBullets: true
ページネーションに強弱がつくようになる。アクティブなのは大きく、それ以外は小さく。
デフォルトではfalse。
dynamicMainBullets
数。
dynamicMainBullets: 1
dynamicBulletsがtrue前提。
dynamicBulletsが有効な数を指定できる。
hideOnClick
真偽。
hideOnClick: true
trueだとスライドをクリックするとページネーションが消えたり出たりする。
clickable
真偽。
clickable: true
ページネーションをクリックしたら、それに適したスライドに移動する。
デフォルトでtrueでも良い気が・・・。
progressbarOpposite
真偽。
progressbarOpposite: true
スライダーが横スライドの時に、縦のページネーションが出したい。
もしくは縦のスライドの時に、横のページネーションが出したい時に使う。
デフォルトではfalse。
formatFractionCurrent
関数。
formatFractionCurrent: function (number) { switch(number) { case 1: myNum='ファースト' break; case 2: myNum='セカンド' break; case 3: myNum='サード' break; default:myNum= number } return myNum; },
typeをfractionに指定した上で、現在位置の方の数字表記を変えたい時に使う。
formatFractionTotal
関数。
typeをfractionに指定した上で、全体で何枚あるかの数字表記を変えたい時に使う。
書き方はformatFractionCurrentと同じ。
renderBullet
var swiper = new Swiper('.swiper-container', { //... renderBullet: function (index, className) { return '<span class="' + className + '">' + (index + 1) + '</span>'; } });
ページネーションをよりカスタムしたい人へ。個別クラスを付けたりできる。typeがbullet限定。
renderFraction
var swiper = new Swiper('.swiper-container', { //... renderFraction: function (currentClass, totalClass) { return '<span class="' + currentClass + '"></span>' + ' of ' + '<span class="' + totalClass + '"></span>'; } });
ページネーションをよりカスタムしたい人へ、その2。個別クラスを付けたりできる。typeがfraction限定。
renderProgressbar
var swiper = new Swiper('.swiper-container', { //... renderProgressbar: function (progressbarFillClass) { return '<span class="' + progressbarFillClass + '"></span>'; } });
ページネーションをよりカスタムしたい人へ、その3。個別クラスを付けたりできる。typeがprogress限定。
renderCustom
var swiper = new Swiper('.swiper-container', { //... renderCustom: function (swiper, current, total) { return current + ' of ' + total; } });
ページネーションをよりカスタムしたい人へ、その4。個別クラスを付けたりできる。typeがcustom限定。
bulletClass
文字列(クラス名)
bulletClass: 'swiper-pagination-bullet'
ページネーションのクラスを指定できる。
bulletActiveClass
文字列(クラス名)
bulletActiveClass: 'swiper-pagination-bullet'
アクティブなページネーションのクラスを指定できる。
modifierClass
文字列(クラス名)
modifierClass: 'swiper-pagination-'
パラメータに応じてつくクラスを指定。swiper-pagination-1,swiper-pagination-2みたいな感じになる。
currentClass
文字列(クラス名)
modifierClass: 'swiper-pagination-current'
typeがfractionのときの現在のページ数側の数字につくクラス。
totalClass
文字列(クラス名)
totalClass: 'swiper-pagination-total'
typeがfractionのときの全てのページ数側の数字につくクラス。
hiddenClass
文字列(クラス名)
hiddenClass: 'swiper-pagination-hidden'
hideOnClickがtrueのときに隠れたページネーションにつくクラス。
progressbarFillClass
文字列(クラス名)
progressbarFillClass: 'swiper-pagination-progressbar-fill'
typeがprogressのとき、進行度を示す青色のspanタグにつくクラス。
clickableClass
文字列(クラス名)
clickableClass: true
clickableをtrueにしたときにつくクラス。
lockClass
文字列(クラス名)
progressbarFillClass: 'swiper-pagination-lock'
オプションによってページネーションがロックされている時につくクラス。
progressbarOppositeClass
文字列(クラス名)
progressbarOppositeClass: 'swiper-pagination-progressbar-opposite'
progressbarOppositeがtrueの時につくクラス。
以下、メソッド・プロパティ・オプション。使い方はプロパティ・メソッドのところ見てね。
mySwiper.pagination.el
ページネーション全体のHTML要素を取得できる。
mySwiper.pagination.bullets
ページネーション1個1個のHTML要素を取得できる。特定の順番のを取得したい場合はmySwiper.pagination.bullets[1]みたいに書く。
mySwiper.pagination.render();
ページネーションをレンダリングする。
mySwiper.pagination.update();
ページネーションの状態を更新する。
スクロールバー
スクロールバー(scrollbar)はまず
var mySwiper = new Swiper('.swiper-container', { scrollbar: { el: '.swiper-scrollbar', draggable: true, }, });
で、設置したdivタグをスクロールバーとして認識させる必要がある。
以下、scrollbar:{}内に書くオプション。
el
文字列(クラス名)
el: '.swiper-scrollbar'
スクロールバーとして認識させる。
hide
真偽。
hide: ture
ユーザーが操作したあとにスクロールバーを消すかどうか。
デフォルトではtrue。
draggable
真偽。
draggable: ture
ドラッグ操作を可能にするかどうか。
デフォルトではfalse。
snapOnRelease
真偽。
snapOnRelease: ture
スクロールバーのスナップを離したときに、スライドにフィットするようになる。
デフォルトではfalse・。
dragSize
数
dragSize: 50
ドラッグする黒いやつの横幅を指定できる。
デフォルトでは’auto’。
lockClass
文字列(クラス名)
lockClass: 'swiper-scrollbar-lock'
スクロールバーがロックされているときにつくクラス名を指定できる。
dragClass
文字列(クラス名)
dragClass: 'swiper-scrollbar-drag'
ドラッグする黒いやつのクラス名を指定できる。
以下、メソッド・プロパティ・オプション。使い方はプロパティ・メソッドのところ見てね。
mySwiper.scrollbar.el
スクロールバー全体のHTML要素を指定できる。
mySwiper.scrollbar.dragEl
ドラッグする黒いやつのHTML要素を指定できる。
mySwiper.scrollbar.updateSize();
スクロールバーの状態を更新する。
自動再生関連
ユーザーが操作しなくてもスライドが勝手にすらいど するやつ。
自動再生(autoplay)の基本の書き方はこんなん。
var mySwiper = new Swiper('.swiper-container', { autoplay: { delay: 5000, }, });
以下、autoplay:{}内に書くオプション。
delay
delay: 5000
何秒待ってスライドするかの設定。補足として、個別に設定したい場合はタグに直接書く。
<div class="swiper-slide" data-swiper-autoplay="2000">
デフォルトでは3000。
stopOnLastSlide
真偽。
stopOnLastSlide: true
最後のスライドに到達したらautoplayが停止するかどうか。
デフォルトではfalse。
disableOnInteraction
真偽。
disableOnInteraction: false
ユーザーがスライダーを操作したあと、自動再生が止まるかどうか。falseだと止まらなくなる。
デフォルトだとtrue。
reverseDirection
真偽。
reverseDirection: false
自動再生が逆方向になる。
デフォルトではfalse。
waitForTransition
真偽。
waitForTransition: false
スライドの移動を待ったあとに自動再生するかどうか。基本trueでいいんだけど、virtualTranslateを使用する場合はfalseにする必要がある。
デフォルトではtrue。
以下、メソッド・プロパティ・オプション。使い方はプロパティ・メソッドのところ見てね。
mySwiper.autoplay.running
自動再生が有効かどうか。
mySwiper.autoplay.start();
自動再生を開始する。
mySwiper.autoplay.stop();
自動再生を停止する。
以下、イベント。使い方はイベントのところ見てね。
autoplayStart
自動再生が開始されると実行。
autoplayStop
自動再生が停止されると実行。
autoplay
自動再生によってスライドが移動したら実行。
パララックス(視差効果)
スライダーの中でパララックスを実現できる。
1 オプションで以下を設置
parallax: true
2 HTMLを記述
<div class="swiper-container"> <!-- Parallax background element --> <div class="parallax-bg" style="background-image:url(path/to/image.jpg)" data-swiper-parallax="-23%"> </div> <div class="swiper-wrapper"> <div class="swiper-slide"> <!-- Each slide has parallax title --> <div class="title" data-swiper-parallax="-100">Slide 1</div> <!-- Parallax subtitle --> <div class="subtitle" data-swiper-parallax="-200">Subtitle</div> <!-- And parallax text with custom transition duration --> <div class="text" data-swiper-parallax="-300" data-swiper-parallax-duration="600"> <p>Lorem ipsum dolor sit amet, ...</p> </div> <!-- Opacity parallax --> <div data-swiper-parallax-opacity="0.5">I will change opacity</div> <!-- Scale parallax --> <div data-swiper-parallax-scale="0.15">I will change scale</div> </div> ... </div> </div>
data-swiper-parallaxはスライドした時に移動する距離を設定。数、もしくはパーセントで設定。
data-swiper-parallax-x、data-swiper-parallax-yで縦軸横軸を設定。
data-swiper-parallax-scaleでアクティブじゃないスライドの大きさを指定。
data-swiper-parallax-opacityでアクティブじゃないスライドの透明度を指定。
data-swiper-parallax-durationで推移時間をカスタムで指定。
遅延読み込み(Lazy load)
<div class="swiper-container"> <div class="swiper-wrapper"> <!-- Lazy image --> <div class="swiper-slide"> <img data-src="path/to/picture-1.jpg" class="swiper-lazy"> <div class="swiper-lazy-preloader"></div> </div> <!-- Lazy image with srscet--> <div class="swiper-slide"> <img data-src="path/to/logo-small.png" data-srcset="path/logo/logo-large.png 2x" class="swiper-lazy"> <div class="swiper-lazy-preloader"></div> </div> <!-- Element with lazy background image --> <div class="swiper-slide"> <div data-background="path/to/picture-2.jpg" class="swiper-lazy"> <div class="swiper-lazy-preloader"></div> </div> </div> <!-- Lazy background image on slide itself --> <div data-background="path/to/picture-3.jpg" class="swiper-slide swiper-lazy"> <div class="swiper-lazy-preloader"></div> </div> </div> </div>
遅延ロードする画像には.swiper-lazyを設定。かつ、srcではなくdata-srcで設定。srcsetではなく、data-srcsetで設定。
スライドの背景画像はdata-backgroundで設定。
各スライドの後ろにdiv.swiper-lazy-preloaderを設置(白いプリロードにしたいならswiper-lazy-preloader-whiteを追加)。
かつ、オプションに2つを追加
preloadImages: false, lazy: true
レイジーロードのオプションを使いたいなら下の書き方。
preloadImages: false, lazy: { loadPrevNext: true }
lazy:{}の中に遅延読み込みのオプションを書いてく。
以下、オプション。
loadPrevNext
真偽。
loadPrevNext: false
次の画像も遅延ロードするかどうか。個人的にはfalse推奨。
デフォルトではfalse。
loadPrevNextAmount
数
loadPrevNextAmount: 1
プリロードする次・前の画像の枚数。
デフォルトでは1。
loadOnTransitionStart
loadOnTransitionStart: true
デフォルトではスライドアニメーション完了後にロードするけど、これをtrueにするとスライドアニメーション前にロードする。
デフォルトではfalse。
elementClass
文字列(クラス名)
elementClass: 'swiper-lazy'
遅延ロードする画像につけるクラス。
デフォルトでは’swiper-lazy’
loadingClass
文字列(クラス名)
loadingClass: 'swiper-lazy-loading'
遅延ロード要素につくクラス。
デフォルトでは’swiper-lazy-loading’
loadedClass
文字列(クラス名)
loadingClass: 'swiper-lazy-loaded'
読み込み完了後の要素につくクラス。
デフォルトでは’swiper-lazy-loaded’
preloaderClass
文字列(クラス名)
preloaderClass: 'swiper-lazy-preloader'
プリローダーにつけるクラス。
デフォルトでは’swiper-lazy-preloader’
以下、メソッドとオプション。使い方はメソッドのところ見てね。
mySwiper.lazy.load();
遅延読み込みした画像を読み込む。
mySwiper.lazy.loadInSlide(index);
指定した順番の遅延読み込みした画像を読み込む。
以下、イベント。使い方はイベントのところ見てね。
lazyImageLoad
遅延読み込み開始で実行。
lazyImageReady
画像が読み込まれたら実行。
フェード効果
スライドが横(縦)方向にずれるスライドではなく、フェードインでのスライドになる。
var mySwiper = new Swiper('.swiper-container', { fadeEffect: { crossFade: true }, });
crossFade
真偽。
crossFade: true
クロスフェード効果を有効にする。フェードを実装するなら設定必須レベルかも。
デフォルトではfalse。
カバーフロー効果
立体的なやつが横に並ぶやつ。
var mySwiper = new Swiper('.swiper-container', { coverflowEffect: { rotate: 30, slideShadows: false, }, });
slideShadows
真偽。
slideShadows: true
スライドに影をつける。
デフォルトではtrue。
rotate
数
rotate: 30
次のスライドに行く時までに各スライドがどの程度回転するかの角度。
デフォルトでは50。
stretch
数
stretch: 0
スライド間の距離。デフォルトでは0。
depth
数
depth: 100
奥行き。デフォルトでは100。
modifier
数
modifier: 1
角度。デフォルトでは1。
フリップ効果
くるって裏返したら次のスライドになるやつ。カードゲームのオープニングにあるやつって言えばなんとなく伝わりそう。
var mySwiper = new Swiper('.swiper-container', { flipEffect: { slideShadows: false, }, });
slideShadows
真偽。
slideShadows: false
スライドの影。デフォルトではtrue。
limitRotation
真偽。
limitRotation: false
角度の制限みたいなものなんだけど、これfalseにすると動きやばくなるからtrue固定でいいと思う。
デフォルトではtrue。
キューブ効果
直方体が回転するみたいなスライドになる。極力スライドさせる画像は正方形の方がきれい。
var mySwiper = new Swiper('.swiper-container', { cubeEffect: { slideShadows: false, }, });
slideShadows
真偽。
slideShadows: false
側面の影のオンオフ。デフォルトではtrue。
shadow
真偽。
shadow: false
キューブの下にある影のオンオフ。デフォルトではtrue。
shadowOffset
数
shadowOffset: 20
影の位置。デフォルトでは20。
shadowScale
数
shadowScale: 0.94
影の大きさ。デフォルトでは0.94。
サムネイル
サムネイルを選択したらそこにスライドするというswiperを実現したい時のオプション。
swiperを2種類用意する。
var thumbs = new Swiper('#thumbs',{ spaceBetween: 5, slidesPerView: 5, watchSlidesVisibility: true, }) var gallerySwiper = new Swiper('#view',{ thumbs: { swiper: thumbs, } })
thumbs内にオプションを入れていく。
swiper
別のswiperがある変数を指定する。これで紐づく感じ。上のサンプル参照。
thumbs: { swiper: { el: '.swiper-container-thumbs', slidesPerView: 5, } }
こういう感じでもできるけど、基本最初のサンプルに書いたほうがわかりやすい。
slideThumbActiveClass
文字列(クラス名)
slideThumbActiveClass: 'swiper-slide-thumb-active'
アクティブなサムネイルにつくクラス。
thumbsContainerClass
文字列(クラス名)
slideThumbActiveClass: 'swiper-container-thumbs'
サムネイルの方のコンテナにつくクラス。
multipleActiveThumbs
真偽。
multipleActiveThumbs: false
複数のサムネイルをアクティブにできる状態にできる。true推奨。
デフォルトではtrue。
autoScrollOffset
数。
autoScrollOffset: 1
例えば、slidesPerViewを4に設定していて上記オプションを設定していて、スライドが6枚ある場合、4番目をクリックした後に5番目のスライドがすっと出てくるようにできる。
1にすることが個人的には推奨。
デフォルトでは0。
以下、メソッドとオプション。使い方はメソッドのところ見てね。
mySwiper.thumbs.swiper
サムネイルを読み込む。
ズーム機能
ダブルタップ・ダブルクリックでズームしたり、ピンチイン・ピンチアウトでズームしたりできる。
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="swiper-zoom-container"> <img src="path/to/image1.jpg"> </div> </div> <div class="swiper-slide"> <div class="swiper-zoom-container"> <img src="path/to/image2.jpg"> </div> </div> <div class="swiper-slide">Plain slide with text</div> <div class="swiper-slide"> <!-- Override maxRatio parameter --> <div class="swiper-zoom-container" data-swiper-zoom="5"> <img src="path/to/image1.jpg"> </div> </div> </div> </div>
.swiper-zoom-containerで囲むする必要がある。data-swiper-zoomを使えば個別に最大倍率を操作できる。
maxRatio
数
maxRatio: 3
ズームした時の最大倍率。デフォルトでは3。
minRatio
minRatio: 1
最小倍率。デフォルトでは1。
toggle
真偽。
toggle: false
ダブルタップでのズームを有効・無効にする。
デフォルトではtrue。
containerClass
文字列(クラス名)
containerClass: 'swiper-zoom-container'
囲むやつのクラス名を指定できる。
デフォルトでは’swiper-zoom-container’
zoomedSlideClass
文字列(クラス名)
zoomedSlideClass: 'swiper-slide-zoomed'
拡大されたときのクラス名を指定できる。
デフォルトでは’swiper-slide-zoomed’
以下、メソッド・プロパティ・オプション。使い方はプロパティ・メソッドのところ見てね。
mySwiper.zoom.enabled
ズームしてるかどうかを取得できる。
mySwiper.zoom.scale
今の比率を取得できる。
mySwiper.zoom.enable();
ズームを有効にする。
mySwiper.zoom.disable();
ズームを無効にする。
mySwiper.zoom.in();
アクティブなスライドを拡大する。
mySwiper.zoom.out();
アクティブなスライドを縮小する。
mySwiper.zoom.toggle();
アクティブなスライドの拡大・縮小を切り替える。
キーボード操作
キーボードでスライダーを操作できるようにする。
var mySwiper = new Swiper('.swiper-container', { keyboard: { enabled: true, onlyInViewport: false, }, });
enabled
真偽。
enabled: false
キーボード操作を有効にする。
デフォルトではfalse。
onlyInViewport
真偽。
onlyInViewport: false
ビューポートにあるスライダーのみ適応させる。
デフォルトではtrue。
pageUpDown
真偽。
pageUpDown: false
trueにすると、Page UpキーとPage Downキーで操作できるようになる。
デフォルトではtrue。
以下、メソッド・プロパティ・オプション。使い方はプロパティ・メソッドのところ見てね。
mySwiper.keyboard.enabled
キーボード操作が有効かどうか取得できる。
mySwiper.keyboard.enable();
キーボード操作を有効にする。
mySwiper.keyboard.disable();
キーボード操作を無効にする。
マウスホイール操作
マウスホイールでスライダーを操作できるようにする。
var mySwiper = new Swiper('.swiper-container', { mousewheel: { invert: true, }, });
forceToAxis
真偽。
forceToAxis: false
マウスホイールを転がした方向でしかスライドできなくする。水平モードではマウスホイールは水平マウスホイールスクロールでのみ機能し、垂直モードでは垂直スクロールでのみ機能する。
デフォルトではfalse。
releaseOnEdges
真偽。
releaseOnEdges: false
trueだと最初のスライドのときに上にマウスを動かすとページが動くようになる。また、最後のスライドのときに下にマウスを動かすとページが動く。
少し挙動が不安定かも。
デフォルトではfalse。
invert
真偽。
invert: false
スライド方向が逆になる。
デフォルトではfalse。
sensitivity
数
sensitivity: 1
マウスホイールの感度。
デフォルトでは1。
eventsTarged
文字列(クラス名)
eventsTarged: 'container'
マウスホイールのイベントが発火するHTML要素を取得できる。デフォルトでは’container’(swiper-container)
以下、メソッド・プロパティ・オプション。使い方はプロパティ・メソッドのところ見てね。
mySwiper.mousewheel.enabled
マウスホイールコントロールが有効かどうかを取得できる。
mySwiper.mousewheel.enable();
マウスホイールコントロール操作を有効にする。
mySwiper.mousewheel.disable();
マウスホイールコントロール操作を無効にする。
Virtual Slides
スライドしたい要素が大量にある(100とか200とか)ある場合、流石に重い。
そうした時に、アクティブなスライドとその前後だけを読み込みDOMに追加し、次へボタンが押されたりしたらその次のスライドの前後だけを読み込みDOMに追加、前のスライドの前後にあったものはDOMから削除するとしたら軽くなる。それをしてくれるオプション。
書くと果てしなく長くなりそうだから省略。
ハッシュ
各スライドにdata-hash=”slide1″のような感じでdata-hashを設置すると、url#slide1といったurlでdata-hashが一致するところからスライドが始まる。
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" data-hash="slide1">Slide 1</div> <div class="swiper-slide" data-hash="slide2">Slide 2</div> <div class="swiper-slide" data-hash="slide3">Slide 3</div> <div class="swiper-slide" data-hash="slide4">Slide 4</div> <div class="swiper-slide" data-hash="slide5">Slide 5</div> ... </div> </div>
var swiper = new Swiper('.swiper-container', { //enable hash navigation hashNavigation: true })
オプションを書くなら以下。
var mySwiper = new Swiper('.swiper-container', { hashNavigation: { replaceState: true, }, });
watchState
真偽
watchState: false
ブラウザで戻るボタンとか押してハッシュタグが変わったりしたときにそれを認識してスライドも移動する。
デフォルトではfalse。
replaceState
真偽
replaceState: true
スライダーが移動する度にURLにハッシュタグもつくようになる。ブラウザの戻るボタンがめんどくさくなるから正直どうなんだろうなって部分もある。
それを、これtrueにすれば大丈夫になる。
内部機能でいうと、ハッシュつきのURLを履歴に残すんじゃなくてURLだけで履歴残すとかそんなん。
デフォルトではfalse。
history
スライドする度にURLを書き換える。ちょっと何に使うかわからないですね。
var mySwiper = new Swiper('.swiper-container', { history: { replaceState: true, }, });
<div class="swiper-slide" data-history="slide1"></div>
keyオプションで指定した文字/date-historyで入力した文字でURLになる。
replaceState
真偽
replaceState: true
この機能を実装してるとブラウザの戻るボタンがめんどくさくなるから正直どうなんだろうなって部分もある。
それを、これtrueにすれば大丈夫になる。
内部機能でいうと、URLを履歴に残すんじゃなくてURLを置き換えるみたいな。
デフォルトではfalse。
key
文字列
key: 'slides'
URLにつく文字を指定できる。
コントローラー
複数スライダーがある時に、片方のスライダーを操作したらもう片方のスライダーも一緒に動くようにしたい!そんな願いを叶えます。
2つの場合はこんなん。
var Swiper1 = new Swiper('#swiper-container1'); var Swiper2 = new Swiper('#swiper-container2',{ controller: { control: Swiper1, // ここに1つ目のスライダーの変数名 }, })
それより多いならこっちのがいいかも。
var Swiper1 = new Swiper('#swiper-container1'); var Swiper2 = new Swiper('#swiper-container2'); var Swiper3 = new Swiper('#swiper-container3',{ controller:{ control: [Swiper1, Swiper2], // ここに1つ目と2つ目のスライダーの変数名 }, })
後からこれで追加もできる。
Swiper1.controller.control = Swiper2; Swiper2.controller.control = Swiper1; [html] inverse 真偽 [html] inverse: false
trueだと動きが逆になる。デフォルトではfalse。
by
文字列
by: 'slide'
‘slide’もしくは’container’。どちらをベースに制御するかを選択できる。
デフォルトでは’slide’
アクセシビリティ(a11y)
音声やスクリーンリーダーを使用するなら。
var mySwiper = new Swiper('.swiper-container', { a11y: { prevSlideMessage: 'Previous slide', nextSlideMessage: 'Next slide', }, });
prevSlideMessage
文字列
prevSlideMessage: 'Previous slide'
前ボタンのスクリーンリーダーでの文字。
デフォルトでは’Previous slide’。
nextSlideMessage
文字列
nextSlideMessage: 'Next slide'
次ボタンのスクリーンリーダーでの文字。
デフォルトでは’Next slide’。
firstSlideMessage
文字列
firstSlideMessage: 'This is the first slide'
最初のスライドの時に出るスクリーンリーダーでの文字。
デフォルトでは’This is the first slide’。
lastSlideMessage
文字列
lastSlideMessage: 'This is the last slide'
最後のスライドの時に出るスクリーンリーダーでの文字。
デフォルトでは’This is the last slide’。
paginationBulletMessage
文字列
paginationBulletMessage: 'Go to slide {{index}}'
paginationで使用するスクリーンリーダーでの文字。
デフォルトでは’Go to slide {{index}}’
notificationClass
文字列(クラス名)
notificationClass: 'swiper-notification'
a11yを使用したら追加されるクラス名。
デフォルトでは’swiper-notification’
あと公式ではカスタムswiperを自作する方法とかあったけど、ちょっと難易度高いしこれを使用する場面があまり想像できなかったので省略で。
(カスタムswiperを作れる人なら自作のスライダー作った方が楽だし軽そう)
また、TypeScriptに関することも公式サイトでは少しだけ書いてるから気になる人は公式サイトを。
これいつまでやるかわからないけど、時間ある時にまたアップするね。
コメントは間違いに対する指摘を考慮して、受け付けてるけど、あくまで個人ブログで、自分しか記事書いてないから、質問は基本的にteratailとかの方がいいかも。すまぬ~。フリーランスで忙しさにムラがあるから、許して。
ではでは~。
レーウィン様はじめまして。
いつもこのサイトを見て参考にさせていただいております。
お尋ねしたいのですが、マウスホイール操作をありにしている状態だと.swiper-containerの内部にスクロール部分があってもホイールすると全体がスクロールされてしまいます。
マウスがその個所にホバーしている状態では、その個所をスクロールさせ、ホバーが外れたら全体をスクロールさせるというのは可能でしょうか?
解決方法がお分かりでしたら教えていただけると幸いです。
———————————————————————-
・・・・・・・・・ ←ここだけスクロールさせたい。
———————————————————————-
申し訳ございません。先ほどコメントしたHshuです。
文章がおかしなことになっているようなので再度送ります。
お尋ねしたいのですが、マウスホイール操作をありにしている状態だと.swiper-containerの内部にスクロール部分があってもホイールすると全体がスクロールされてしまいます。
マウスがその個所にホバーしている状態では、その個所をスクロールさせ、ホバーが外れたら全体をスクロールさせるというのは可能でしょうか?
解決方法がお分かりでしたら教えていただけると幸いです。
Hshuさん
コメントありがとうございます!すみません、返信遅れました。
こちらのオプションを既に設置されているということだと思いますが、このオプションの仕様としては
①全体スクロールの途中でswiperにマウスが乗っかりそのままマウスを動かさなかった場合は全体スクロールが維持される
②全体スクロールの途中でswiperにマウスが乗っかりそのswiperの上でマウスを少しでも動かした場合swiperが動く
となっています。
で、①の状態でもswiperを動かしたいという場合は残念ながらオプションでは難しいと思います(私の知る限りでは)。
なので、別途jsを用意しないといけないですね・・・。
方向性としてはswiperに乗った時にmySwiper.slideNext(speed, runCallbacks);を使って次スライドに行く。
もしくは、スクロールの判定をeventsTargedで全体覆うようにしつつスクロール位置によってmySwiper.mousewheel.enable();を使ってマウスホイールで制御するといった感じになると思います。
あとは、もしかしたら別プラグインの方が良いという場合もあるかもしれません。
お忙しいところご返信ありがとうございます。
早速試してみます。
こんにちは。Swiperのオプションについての良記事ありがとうございます。参考にさせていただいています。
お尋ねしたいことがありまして…
私はスライドを移動させずにハイライトでスライドを切り替えたいと考えているのですが、エラーが出て上手くいきません。
on: {
slideChange: function () {
document.querySelector(‘my-swiper’).style.transform = “translate3d(0,0,0)”;
},
}
→ Uncaught TypeError: Cannot read property ‘style’ of null
また、jQueryのCDNも読み込んであるのでDOMの取り方を
$(‘.my-swiper’)に変えてもみたのですが、こちらは Uncaught TypeError: Cannot set property ‘transform’ of undefined とエラーが出てしまったり、onを外に出してみても同じ結果でした。
たくさん調べたり試してみたのですが解決できず…
何か解決策ありましたらご教授いただけますと幸いです。
もし「スライドを移動させずに切り替えるならこっちの方法のがいいよ」等ありましたら、是非そちらも宜しくお願いします。
ちなみに以下全コードです。(関係ないコードですが、消えてしまっているコードがあるのでJSFiddleリンク: https://jsfiddle.net/__R2D2/3Lpgjwkv/12/)
var mySwiper = new Swiper(‘.my-swiper’, {
on: {
init: function () {
this.snapGrid = this.slidesGrid;
},
slideChange: function () {
document.querySelector(‘my-swiper’).style.transform = “translate3d(0,0,0)”;
},
},
direction: ‘vertical’,
autoHeight: true,
slideToClickedSlide: true,
slidesPerView: ‘auto’,
passiveListeners: false,
keyboard: {
enabled: true,
},
mousewheel: {
forceToAxis: true,
},
pagination: {
el: ‘.swiper-pagination’,
type: ‘bullets’,
clickable: ‘true’,
},
renderBullet: function (index, className) {
return ” (index 1) ”;
},
});
ラムネさん
コメントありがとうございます!忙しいのでヒントになりそうなことだけ…
effectの中にはfadeがあります。こちらをベースに進めた方がいいと思います。
ハイライトというのは間に白が入り、その間にスライドが切り替わるとかですかね。スライドの切り替え開始時、切り替え完了時に発火するコールバックがあるので、それでスライドの上に配置した白色のdivのopacityを変えることで近いことはできるかもしれません。
早々のご返信ありがとうございます!
説明不足でごめんなさい。current slideを明るくする感じです。
わかりやすいようにJSFiddleリンクを追加しました。(エラーで切り替えが上手くいってないですが…)
大変申し訳ないのですが、お手すきの際にもう一声お願いいたします><
無事解決しました!お騒がせしました。ありがとうございました。