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

a0002_011891_m
以前もswiper.jsのオプションについて書いた記事を書いたんだけど、久しぶりに公式見たら一新されてて震えたから再度記事として上げる。
以前のバージョンの記事をどうしようかと悩んでたけど、多分まだ需要あるから残しとく。旧バージョンはこちら
ついでにpagination等の設置方法をわかりやすくした。
ついでについでに、メソッドとかも追加。マジ疲れた。褒めて。

swiper.jsってなんぞ?

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

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

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

デメリット

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

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

実装について

公式ページのここに書いてある。
http://idangero.us/swiper/api/
ざっくり説明すると、
1、公式ページからzipをダウンロード。解凍してdistフォルダを開くとjsとcssがある。それぞれを設置。cssは普通にheadタグ内に。swiper.js(swiper.min.js)についてはheadタグではなく、/bodyの上に置く。(ちなみに、minは圧縮版なので基本minの方を使用推奨)
2、swiperを実装したいブロック(divタグ)に.swiper-containerをつける。
3、div.swiper-containerにdiv.swiper-wrapperを。
4、さらにその中にdiv.swiper-slideを。ここにコンテンツを入れる。
5、swipeを実装するための記述とか、オプションを記述するために使うjsを作成する。このjsも/bodyの上・swiper.jsの下に設置する。

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

<!-- 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の中に入れてオプションで設定する必要がある。

<!-- 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の上書きだと思うから、それで自分だけのオリジナルデザインを作ろう!(昔のソシャゲ風キャッチ)

オプションについて

ここからが本題。このオプションを使わないとわざわざ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!!");
}
// 中略
on: {
    slideChange: function () {
      start_alert();
    },
}

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

ページが長くなりすぎたから、よく使うやつだけアンカーリンクしとく。ここに無いやつはブラウザの検索機能とかで頑張って。
speed(スライドするスピード)
width(スライダーの横幅をpx指定)
height(スライダーの高さをpx指定)
spaceBetween(スライド間の隙間を設定)
slidesPerView(1画面に何枚スライドを入れるか設定)
slidesPerGroup(複数のスライドをグループ化)
touchAngle(スライドをスワイプできる角度を設定)
resistanceRatio(バウンスの量を設定できる)
loop(ループ)
realIndex(現在表示してるスライドの番目を取得)
プロパティ(スライダーの情報を取得)
各種メソッド(jsでスライドを操作する)
各種イベント(~した時に関数を実行)
ナビゲーション(左右の次へ前へボタン)
ページネーション(下の丸が並んでるやつ)
自動再生
フェードに変更

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

基本オプション

init
真偽。

init: true

swiperが生成された時に、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

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

height

数。

height: 400

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

autoHeight
真偽。

autoHeight: false

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

watchOverflow
真偽。

watchOverflow: false

スライドの枚数がスライダー生成の条件に満たさない時(わかりやすい話、1枚しかスライドがないとか)、コントロール関係を削除してスライド機能もなくす。ワードプレスに組み込むときとかtrueにしていいと思う。
デフォルトではfalse。

Slides grid

spaceBetween

数。

spaceBetween: 10

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

slidesPerView

数字もしくはauto。

slidesPerView: 3

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

slidesPerColumn
数。

slidesPerColumn: 3

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

slidesPerColumnFill
文字列。

slidesPerColumn: 'row'

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

slidesPerGroup

数。

slidesPerGroup: 2

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

centeredSlides
真偽。

centeredSlides: true

trueにすると、スライドのスタート(デフォルトでは0枚目)が左端じゃなくて真ん中になる。実質slidesPerViewが3以上の奇数前提な気がする。
デフォルトでは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。

カーソル関係

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。

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。

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が追加される。
デフォルトではfalse。

loopAdditionalSlides
数。

loopAdditionalSlides: 0

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

loopedSlides
数。

loopedSlides: 5

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

loopFillGroupWithBlank
真偽。

loopFillGroupWithBlank: true

slidesPerGroupを使用していて、スライドの枚数が足りなくてループどうしよう!って時に。足りない分を空白のスライダーで埋めてくれる。
デフォルトでは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
    }
  }
})

Observer

observer
真偽。

observer: true

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

observeParents
真偽。

observeParents: 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’。

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.update();
swiperのオプション以外でスライドを削除したりした場合はこれを実行してスライダーが正常に動くようにする。

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.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.disableMousewheelControl();
マウスホイールコントロールを無効にする。

mySwiper.enableMousewheelControl();
マウスホイールコントロールを有効にする。

mySwiper.disableKeyboardControl();
キーボードコントロールを無効にする。

mySwiper.enableKeyboardControl();
キーボードコントロールを有効にする。

mySwiper.unsetGrabCursor();
カーソルのグラブを解除する。

mySwiper.setGrabCursor();
カーソルのグラブを有効にする。

イベント関係

イベント登録の方法は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
最初のスライドもしくは最後のスライドから移動するときに実行される。

setTranslate
.swiper-wrapperのtransformの数値が変更されたときに実行される。

resize
スライダーにリサイズが発生したときに実行される。

ナビゲーションはまず

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前提。薄くなったナビゲーションにつくクラスを指定できる。

以下、メソッドとオプション。使い方はメソッドのところ見てね。
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でも良い気が・・・。

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にしたときにつくクラス。

以下、メソッド・プロパティ・オプション。使い方はプロパティ・メソッドのところ見てね。
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(http://lorempixel.com/900/600/nightlife/2/)"
        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。

ズーム機能

ダブルタップ・ダブルクリックでズームしたり、ピンチイン・ピンチアウトでズームしたりできる。

<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。

以下、メソッド・プロパティ・オプション。使い方はプロパティ・メソッドのところ見てね。
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;


inverse
真偽

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.js使ってみたからそのオプションについて(v4.1.6)」への36件のフィードバック

  1. いつもお世話になってます!

    スライドが1枚の時は自動的にスライド効果を切るようにして、
    ページネーションも非表示にしたいのですが
    どうすれば良いでしょうか。。

    watchOverflow: true,

    こちらを入れても効かないようです。

    1. ビバ覇者さん

      コメントありがとうございます!
      スライドの機能をオフにするのはwatchOverflowを使用するので合ってます。実際、私の方ではそれでできていますね。
      なので、オプションの書き方か、swiperのバージョンの問題か、もしくは特殊なエラーがあるかもしれません。
      一応で、私が試しに今制作してwatchOverflowが機能しているソースそのままを貼っておきますね!解決になるかわかりませんが。。

      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>テスト</title>
      <link rel="stylesheet" href="common/css/swiper.min.css">
      <style>
          html, body {
            position: relative;
            height: 100%;
          }
          body {
            margin: 0;
            padding: 0;
          }
          a {
              width: 100%;
          }
      
      *, *:before, *:after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      
      .swiper-slide{
              pointer-events: none;
              opacity: .3;
              -webkit-transition: opacity .5s;
              -moz-transition: opacity .5s;
              -ms-transition: opacity .5s;
              -o-transition: opacity .5s;
              transition: opacity .5s;
              width: 560px !important;
              height: 420px;                   
      }
      .swiper-slide img{
              width: 100%;
              height: 100%;
              object-fit: contain;
      }
      .swiper-slide-active{
              pointer-events: auto;
              opacity: 1;
      }
      </style>
      <script src="https://code.jquery.com/jquery-1.11.1.js" integrity="sha256-MCmDSoIMecFUw3f1LicZ/D/yonYAoHrgiep/3pCH9rw=" crossorigin="anonymous"></script>
      <style>
      </style>
      </head>
      <body>
        <div class="swiper-block">
      <div class="swiper-container swiper-container-01">
          <div class="swiper-wrapper">
              <div class="swiper-slide" style="background: #ccc;"><img src="http://reiwinn-web.net/wp-content/uploads/2016/02/a0002_011891_m-1024x678.jpg" alt=""></div>
              <div class="swiper-slide" style="background: #ddd;"><img src="https://cdn.pixabay.com/photo/2018/05/17/22/46/forest-3409907_960_720.jpg" alt=""></div>
              <div class="swiper-slide" style="background: #ccc;"><img src="http://reiwinn-web.net/wp-content/uploads/2016/02/a0002_011891_m-1024x678.jpg" alt=""></div>
              <div class="swiper-slide" style="background: #ddd;"><img src="http://reiwinn-web.net/wp-content/uploads/2016/02/a0002_011891_m-1024x678.jpg" alt=""></div>
              <div class="swiper-slide" style="background: #ccc;"><img src="http://reiwinn-web.net/wp-content/uploads/2016/02/a0002_011891_m-1024x678.jpg" alt=""></div>
              <div class="swiper-slide" style="background: #ddd;"><img src="http://reiwinn-web.net/wp-content/uploads/2016/02/a0002_011891_m-1024x678.jpg" alt=""></div>
              <div class="swiper-slide" style="background: #eee;"><img src="http://reiwinn-web.net/wp-content/uploads/2016/02/a0002_011891_m-1024x678.jpg" alt=""></div>
          </div>
          <div class="swiper-pagination"></div>
      </div>
      </div>
      <script src="common/js/swiper.min.js"></script>
      <script>
      var swiper01;
      $(window).load(function() {
          swiper01 = new Swiper('.swiper-container-01', {
            speed: 1000,
            slidesPerView: 'auto',
            watchOverflow: true,
            pagination: {
              el: '.swiper-pagination',
              clickable: true
            },
          });
      });
      </script>
      </body>
      </html>
      

      よろしくお願いします!

      1. レーウィンさん

        ご返信ありがとうございます!!

        いただいたソースをコピーしてテストページを作ってみたのですが、
        スライドを一枚にしても、スライド機能とページングが表示されたままでした。。

        使用しているjsやcssが違うのでしょうか。。

    1. あ、お手数ですが[と、htmlと、]で作ったタグと、[と、/htmlと、]で囲んでソース書いてみていただけますか?
      [test]
      [/test]

      1. ソースの書き方がわからなくて苦戦してました。。

        
        
        
        	
        	
          
          ***
        
            html, body {
              position: relative;
              height: 100%;
            }
            body {
              margin: 0;
              padding: 0;
            }
            a {
                width: 100%;
            }
         
        *, *:before, *:after {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }
         
        .swiper-slide{
                pointer-events: none;
                opacity: .3;
                -webkit-transition: opacity .5s;
                -moz-transition: opacity .5s;
                -ms-transition: opacity .5s;
                -o-transition: opacity .5s;
                transition: opacity .5s;
                width: 560px !important;
                height: 420px;                   
        }
        .swiper-slide img{
                width: 100%;
                height: 100%;
                object-fit: contain;
        }
        .swiper-slide-active{
                pointer-events: auto;
                opacity: 1;
        }
        
        
        
        
        
        	
        			
        				
                    
                      
                        
                          
                        
                        
                      
                    
                
              
        			<!-- /.row -->
        	
        	<!-- /.contents -->
        
        <!-- /.container -->
        
        
        
        
          var swiper01;
          $(window).load(function () {
            swiper01 = new Swiper('.swiper-container-01', {
              speed: 1000,
              slidesPerView: 'auto',
              watchOverflow: true,
              pagination: {
                el: '.swiper-pagination',
                clickable: true
              },
            });
          });
        
        
        
        
        
      2. 連投してすみません。。

        <!DOCTYPE html>
        <html lang="ja">
        <head>
        	<meta charset="UTF-8">
        	<meta name="viewport" content="width=device-width, initial-scale=1.0">
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" />
          <title>Parts List</title>
        <style>
            html, body {
              position: relative;
              height: 100%;
            }
            body {
              margin: 0;
              padding: 0;
            }
            a {
                width: 100%;
            }
         
        *, *:before, *:after {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }
         
        .swiper-slide{
                pointer-events: none;
                opacity: .3;
                -webkit-transition: opacity .5s;
                -moz-transition: opacity .5s;
                -ms-transition: opacity .5s;
                -o-transition: opacity .5s;
                transition: opacity .5s;
                width: 560px !important;
                height: 420px;                   
        }
        .swiper-slide img{
                width: 100%;
                height: 100%;
                object-fit: contain;
        }
        .swiper-slide-active{
                pointer-events: auto;
                opacity: 1;
        }
        </style>
        </head>
        <body>
        
        <div class="container">
        	<div class="contents">
        			<div class="row small-collapse">
        				<div class="small-12 columns">
                    <div class="swiper-block">
                      <div class="swiper-container swiper-container-01">
                        <div class="swiper-wrapper">
                          <div class="swiper-slide" style="background: #ccc;"><img src="http://reiwinn-web.net/wp-content/uploads/2016/02/a0002_011891_m-1024x678.jpg"
                              alt=""></div>
                          <!-- <div class="swiper-slide" style="background: #ddd;"><img src="https://cdn.pixabay.com/photo/2018/05/17/22/46/forest-3409907_960_720.jpg"
                              alt=""></div>
                          <div class="swiper-slide" style="background: #ccc;"><img src="http://reiwinn-web.net/wp-content/uploads/2016/02/a0002_011891_m-1024x678.jpg"
                              alt=""></div>
                          <div class="swiper-slide" style="background: #ddd;"><img src="http://reiwinn-web.net/wp-content/uploads/2016/02/a0002_011891_m-1024x678.jpg"
                              alt=""></div>
                          <div class="swiper-slide" style="background: #ccc;"><img src="http://reiwinn-web.net/wp-content/uploads/2016/02/a0002_011891_m-1024x678.jpg"
                              alt=""></div>
                          <div class="swiper-slide" style="background: #ddd;"><img src="http://reiwinn-web.net/wp-content/uploads/2016/02/a0002_011891_m-1024x678.jpg"
                              alt=""></div>
                          <div class="swiper-slide" style="background: #eee;"><img src="http://reiwinn-web.net/wp-content/uploads/2016/02/a0002_011891_m-1024x678.jpg"
                              alt=""></div> -->
                        </div>
                        <div class="swiper-pagination"></div>
                      </div>
                    </div>
                </div>
              </div>
        			<!-- /.row -->
        	</div>
        	<!-- /.contents -->
        </div>
        <!-- /.container -->
        
        <script src="https://code.jquery.com/jquery-1.11.1.js" integrity="sha256-MCmDSoIMecFUw3f1LicZ/D/yonYAoHrgiep/3pCH9rw=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
        <script>
          var swiper01;
          $(window).load(function () {
            swiper01 = new Swiper('.swiper-container-01', {
              speed: 1000,
              slidesPerView: 'auto',
              watchOverflow: true,
              pagination: {
                el: '.swiper-pagination',
                clickable: true
              },
            });
          });
        </script>
        
        </body>
        </html>
        
        
        
      1. ビバ覇権さん
        なるほどですね。結論からですが、swiperのバージョンが古いです。
        現在ビバ覇権さんの使用しているswiperのバージョンが4.0.7ですが、どうやらそれにはwatchOverflowはなさそうです。(js内の文字列検索でwatchOverflowが存在しないので)
        この記事でのオプションを使用する場合は、swiperの使用しているものを以下に差し替えてください。
        https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/css/swiper.min.css
        https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/js/swiper.min.js

        これでお試しください!もしかしたらwatchOverflowは効く分、別のオプションの仕様変更で表示が崩れる可能性もありますが、そこは調整してくださいませ~。

        1. レーウィンさん

          ありがとうございます!

          いただいたもので差し替えただけでは効かなかったのですが、
          loopをtrueにしたら効きました!

          これって併用はできないのでしょうか。。
          何はともあれありがとうございます!

          1. 間違えました。

            loopを外したら、です。

          2. ビバ覇権さん

            ひとまずよかったですー!
            loopとwatchOverflowは併用できないみたいですね。
            両方を実現する場合は、swiper-slideの数を取得して分岐を設定する必要がありそうです。
            lengthを使用すれば要素の数を取得できます。

            var swiper;
            $(window).load(function() {
              var swiperSlide = $(".swiper-slide").length;
              if (swiperSlide <= 1) {
                swiper = new Swiper('.swiper-container-01', {
                  speed: 1000,
                  slidesPerView: 'auto',
                  watchOverflow: true,
                  pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                  },
                });
              } else {
                swiper = new Swiper('.swiper-container-01', {
                  speed: 1000,
                  slidesPerView: 'auto',
                  watchOverflow: true,
                  loop:true,
                  pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                  },
                });
              }
            });
            

            お試しくださいませ~。

  2. レーウィンさん

    ありがとうございます!!!
    できました!!!
    js詳しくなくて助かりました。

    ちなみになのですが・・・
    スマホとPCでjsの記述を出し分けしたいときは
    どう記述したら良いでしょうか。。

    1. ビバ覇権さん

      よかったですー!
      レスポンシブということでしたら、基本的にはbreakpointsの設定がオプションで設定できます。詳細はページ内検索「breakpoints」をしてみてください。
      ただし、一部オプションはbreakpointsで設定することができないようなので、例えばbreakpointsで設定できないloopをレスポンシブで出しわけという話ですと

      var swiper;
      var swiperSlide = $(".swiper-slide").length;
      var ww = $(window).width();
      var spPoint = 750;
      function swiperFunc() {
        ww = $(window).width();
        if (swiperSlide <= 1) {
          // PC・SP共通 スライドの枚数が0~1枚の時の処理
          swiper = new Swiper('.swiper-container', {
            speed: 1000,
            watchOverflow: true
          });
        } else if (ww >= spPoint) {
          // PC スライドの枚数が2枚以上の時の処理
          swiper = new Swiper('.swiper-container', {
            speed: 1000,
            watchOverflow: true,
            loop:true,
            pagination: {
              el: '.swiper-pagination',
              clickable: true
            }
          });
        } else {
          // SP スライドの枚数が2枚以上の時の処理
          swiper = new Swiper('.swiper-container', {
            speed: 1000,
            watchOverflow: true,
            pagination: {
              el: '.swiper-pagination',
              clickable: true
            }
          });
        }
      }
      $(window).on("load", function() {
        swiperFunc();
      });
      $(window).on("resize", function() {
        swiper.destroy();
        swiperFunc();
      });
      

      少し複雑でこのような感じになるかと!
      もし実装できましたら簡単に調べてみてくださいませ。

  3. レーウィンさん

    ありがとうございました!!
    本当に助かりました。

    このご恩は一生忘れません。
    またjs等で何かあったら
    ご質問させていただくかもしれません。。

  4. レーウィンさん
    こんにちは。
    また、ご質問したいことがございます。

    レスポンシブの設定ですが、3つの画像スライドを1つにまとめたいのですが、
    3つ目の画像が切れてしまっています。
    CSSやJSでどのように設定すればよいでしょうか。

    現在のCSSやJSは、このように設定しています。
    JS

    //レスポンシブ ブレイクポイント
    		breakpoints:{
    			// 横幅が320px以下なら
    			320:{
    				slidesPerView: 1,
    				spaceBetween:20,
    				slidesPerGroup: 3,
    
    				//2枚表示
    				width:80
    
    				//3枚表示
    				//width:80
    			},
    			// 横幅が375px以下なら
    			375:{
    				slidesPerView: 2,
    				spaceBetween:10,
    				slidesPerGroup: 3,
    
    				//2枚表示
    				//width:330
    
    				//3枚表示
    				width:230
    			},
    			// 横幅が414px以下なら
    			414:{
    				navigation: {
    					nextEl: 'aaa',
    					prevEl: 'aaa',
    				},
    				pagination: {
    					el: '.swiper-pagination'
    				},
    				slidesPerView: 2,
    				spaceBetween:10,
    				slidesPerGroup: 3,
    
    				//2枚表示
    				//width:370
    
    				//3枚表示
    				width:250
    			}
    		}
    

    CSS

    	.swiper-container{
    		width: 100%;
    		.swiper-wrapper{
    			.swiper-slide{
    				width: 116px;
    				img{
    					width: 116px;
    					height: 87px;
    				}
    			}
    		}
    		.swiper-pagination{
    			display: block;
    			position: relative;
    			bottom: 0px;
    		}
    	}
    
    1. 光のプログラマーさん

      コメントありがとうございます!
      320px以下の時は3枚1セットのものが1つ見えてる、375px以下と414px以下の時は3枚1セットのものが2つ見えてるようにしたいということでよろしかったでしょうか?
      その認識で合っていれば、slidesPerViewを320pxの時は3に、375pxと414pxの時は6に設定して、widthの設定を外すことで実現できます!

      1. レーウィンさん
        ご返信ありがとうございます。

        申しわけありません。
        誤りがありました。
        414pxと375pxも3枚1セットのものが1つ見えるようにしたいということです。

        大変失礼いたしました。

        1. 光のプログラマーさん

          それでしたらslidesPerViewを全て3ににすれば大丈夫だと思います。
          slidesPerGroupは3つのスライドを1つのスライドとして扱うのではなく、3つのうち1つをスライドさせたらそのグループ他のスライドも一緒にスライドするという認識になります!

          1. レーウィンさん
            ご返信ありがとうございます。

            slidesPerGroup:3

            に設定したらいけました!
            素敵なアドバイスありがとうございます。

            また、このjsでpc版にwidthが設定していたのですが、
            これも何か悪さをしていたようでした。
            pc版にwidthを設定したら、スマホ版に継承するということはありえるのでしょうか?

          2. 光のプログラマーさん

            解決できたようでよかったですー!
            PC版とスマホ版のレスポンシブをどのようにしているかにもよりますが、swiperのbreakpointsはcssのmedia queryと同じ仕様なので例えばbreakpointsを750で設定するとiphone 6でも反映されます(iphone 6の横幅解像度は750pxなので)。
            解像度に関わらずPCとスマホで完全にオプションを分けたい場合はデバイス判定をした上でオプションを反映ということになるので少し手間がかかります。が、可能です。オプションでできる範囲ではないですが・・・。
            下記サイト様にあるデバイス判定と、少し上のコメント返信で書いたオプション分岐を組み合わせて行います。
            https://manablog.org/sp-pc/

  5. レーウィンさん

    ご返信ありがとうございます。
    CSSのメディアクエリと同様に、継承されるんですね。

    別の機会で完全にオプションを分けたい場合が出てきた時は、
    またこちらのサイトを参考させていただきます!

    本当にありがとうございました!

  6. レーウィンさん

    またまたのご質問で申しわけありません。

    PC画面で初回ロード時に、次の画像スライドがあるのにnextボタンが無効になることがあるのですが、
    これはswiper側のバグなのでしょうか。
    スマホ画面では問題ありませんでした。
    ソースはこのように書いております。

    javascript
    [test]
    var detail_swiper = new Swiper(‘.swiper-detail-container’, {
    centeredSlides:true,
    slidesPerView:”auto”,
    spaceBetween:100, //1スライドごとの余白
    speed: 1000,
    navigation: {
    nextEl: ‘.swiper-button-next’,
    prevEl: ‘.swiper-button-prev’,
    },
    /*レスポンシブ ブレイクポイント*/
    breakpoints:{
    // 横幅が414px以下なら
    414:{
    slidesPerView:1,
    spaceBetween:20,
    }
    }
    });
    [/test]

    scss
    [test]
    .main_Swiper{
    overflow: hidden;
    width: 100%;
    .swiper-detail-container{
    position: relative;
    width: 560px;
    //height: 420px;
    margin: 0 auto;
    .swiper-wrapper{
    .swiper-slide{
    pointer-events: none;
    opacity: .3;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
    width: 560px; //比率が4:3になるように調整
    height: 420px; //比率が4:3になるように調整
    img{
    object-fit: cover;
    font-family: ‘object-fit: cover;’;
    width: 560px;
    height: 420px;
    }
    }
    .swiper-slide-active{
    pointer-events: auto;
    opacity: 1;
    }
    }
    .swiper-button-next,
    .swiper-button-prev{
    position: absolute;
    top: 50%;
    background-image: none !important;
    }
    .swiper-button-next{
    right: -12%;
    }
    .swiper-button-prev{
    left: -13%;
    }
    }
    }
    [/test]

    1. 光のプログラマーさん

      うーん、簡単にテストしてみましたが、そういったことは起きないですね・・・。
      PCで414px以下にした時に正常に動いているようであれば、centeredSlides:trueとslidesPerView:”auto”の組み合わせが原因になっているかと!
      もし414px以下の時も正常に動いていない場合はswiperではない部分での不具合の可能性もあります。
      不具合の起きる条件・状況を一度整理してみてくださいー!

      ちなみにですが、SCSSを使用している場合は

      .main_Swiper{
      	overflow: hidden;
      	width: 100%;
      	.swiper-detail-container{
      		position: relative;
      		width: 560px;
      		//height: 420px;
      		margin: 0 auto;
      		.swiper-wrapper{
      			.swiper-slide{
      				pointer-events: none;
      				opacity: .3;
      				-webkit-transition: opacity .5s;
      				-moz-transition: opacity .5s;
      				-ms-transition: opacity .5s;
      				-o-transition: opacity .5s;
      				transition: opacity .5s;
      				width: 560px; //比率が4:3になるように調整
      				height: 420px; //比率が4:3になるように調整
      				img{
      					object-fit: cover;
      					font-family: 'object-fit: cover;';
      					width: 560px;
      					height: 420px;
      				}
      			}
      			.swiper-slide-active{
      			pointer-events: auto;
      			opacity: 1;
      			}
      		}
      		.swiper-button-next,
      		.swiper-button-prev{
      			position: absolute;
      			top: 50%;
      			background-image: none !important;
      		}
      		.swiper-button-next{
      			right: -12%;
      		}
      		.swiper-button-prev{
      			left: -13%;
      		}
      	}
      }
      

      この形よりも

      .main_Swiper{
      	overflow: hidden;
      	width: 100%;
      	.swiper{
      		&-detail-container{
      			position: relative;
      			width: 560px;
      			//height: 420px;
      			margin: 0 auto;
      		}
      		&-wrapper{
      		}
      		&-slide{
      			pointer-events: none;
      			opacity: .3;
      			-webkit-transition: opacity .5s;
      			-moz-transition: opacity .5s;
      			-ms-transition: opacity .5s;
      			-o-transition: opacity .5s;
      			transition: opacity .5s;
      			width: 560px; //比率が4:3になるように調整
      			height: 420px; //比率が4:3になるように調整
      			img{
      				object-fit: cover;
      				font-family: 'object-fit: cover;';
      				width: 560px;
      				height: 420px;
      			}
      		}
      		&-slide-active{
      			pointer-events: auto;
      			opacity: 1;
      		}
      		&-button{
      			position: absolute;
      			top: 50%;
      			background-image: none !important;
      			&-next{
      				right: -12%;
      			}
      			&-prev{
      				left: -13%;
      			}
      		}
      	}
      }
      

      という風にした方が生成されるcssのネストが少なくなるのと文字数が減るのでオススメですー!慣れるのに少し時間がかかりますが。

      1. レーウィンさん

        ご返信ありがとうございます。
        SCSSの書き方大変参考になりました!
        ありがとうございます!

        PCで414px以下というのは、ロード時にブラウザの幅を
        414px以下にして確認するということでしょうか。

        1. 光のプログラマーさん

          そうですね!現状私が持っている情報ですと、
          ①PCで不具合が発生、スマホでは正常。
          ②レスポンシブで414px以下の時にオプションを変えてる。
          があります。
          まず、不具合が発生した時には「どのような状況になると発生するか」を深く絞り込むことが解決に繋がります。
          現状の情報ですと、ブラウザ幅に関わらずPCだと不具合が発生するのかがまだ不明です。
          おそらく414px以下をスマホとして扱っていると思うので、

          ・PCで414px以下の時も不具合が発生する。
          →PC独自の問題。PCでのみ反映しているものに原因がある可能性
          ・PCで414px以下の時は正常。
          →415px以上の時に使用している何かが原因
           →・swiperのオプションを1つずつ消してみる
            →オプションを消していっても不具合が発生した
             →swiper以外が原因
            →特定のオプションを消したときに正常になった
             →そのオプションが原因
              →・一旦オプションを元に戻して原因となったオプションだけを消してみる
               →正常になった場合は、そのオプション単体が原因
               →不具合が発生した場合は、特定のオプションとの組み合わせが原因

          となります。あとは、ロードした時に414px以下の時と、ロードした時は415px以上でそこから縮めて414px以下にしてみた時にどうなるかも調べてみてください!

          1. レーウィンさん
            ご返信ありがとうございます。

            原因が大体判明しました。(まだはっきりとは言えませんが)
            オプションが原因ではありませんでした。
            多分、下記が悪さをしていたと思われます。

            同じHTMLソース内に、swiperスライドを2つ記入してあるのですが、

            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            

            が、2つある場合
            片方はクラス名をリネームしないといけないのでしょうか。

            ちなみにjsの方でも、

            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev'
            }
            

            を2つ書いています。

          2. 光のプログラマーさん

            なるほどですね!
            そうですね、それはクラスは別にした方がいいです。
            オプションでのnavigationのオプションは、イメージとしては線でつなぐような感じです!
            スライダーが1つだけの場合は気にする必要はないですが、複数ある場合はこのスライダーにはこのページネーション・ナビゲーションという風に個別クラスで指定してあげる必要があります。そうでないと、スライダーに対して2本線が繋がってしまいますからね!

  7. レーウィンさん
    ご返信ありがとうございます。
    やはりクラスを別にした方が良いのですね。
    ご的確なアドバイスありがとうございます。

    正確には、このようなソースで書いております

    <div class="swiper-test-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="img/001.jpg">
    		</div>
    		<div class="swiper-slide">
    			<img src="img/002.jpg">
    		</div>
    		<div class="swiper-slide">
    			<img src="img/003.jpg">
    		</div>
    	</div>
    	<!-- Add Arrows -->
    	<div class="swiper-button-next"></div>
    	<div class="swiper-button-prev"></div>
    </div>
    
    <div class="swiper-test2-container">
    	<div class="swiper-wrapper">
    		<div class="swiper-slide">
    			<img src="img/010.jpg">
    		</div>
    		<div class="swiper-slide">
    			<img src="img/011.jpg">
    		</div>
    		<div class="swiper-slide">
    			<img src="img/012.jpg">
    		</div>
    		<div class="swiper-slide">
    			<img src="img/013.jpg">
    		</div>
    		<div class="swiper-slide">
    			<img src="img/014.jpg">
    		</div>
    		<div class="swiper-slide">
    			<img src="img/015.jpg">
    		</div>
    	</div>
    	<!-- Add Arrows -->
    	<div class="swiper-pagination"></div>
    </div>
    <div class="swiper-button-position">
    	<div class="swiper-button-next"><i class="fas fa-chevron-right fa-3x"></i></div>
    	<div class="swiper-button-prev"><i class="fas fa-chevron-left fa-3x"></i></div>
    </div>
    
    var test_swiper = new Swiper('.swiper-test-container', {
    	centeredSlides:true,
    	slidesPerView:"auto",
    	spaceBetween:100,
    	speed: 1000,
    	navigation: {
    		nextEl: '.swiper-button-next',
    		prevEl: '.swiper-button-prev'
    	},
    	breakpoints:{
    		414:{
    			slidesPerView:1,
    			spaceBetween:20
    		}
    	}
    });
    
    var test2_swiper = new Swiper('.swiper-test2-container', {
    	slidesPerView: 5,
    	speed: 1000,
    	spaceBetween:10,
    	navigation: {
    		nextEl: '.swiper-button-next',		//navigation全体ををコメントアウトすると
    		prevEl: '.swiper-button-prev'		//swiper-test-containerの矢印ボタンが動きました。
    	},
    	breakpoints:{
    		414:{
    			pagination: {
    				el: '.swiper-pagination',
    				clickable: true
    			},
    			slidesPerView: 3,
    			spaceBetween:10,
    			slidesPerGroup: 3
    		}
    	}
    });
    
    1. 光のプログラマーさん

      クラスを個別にすればswiperはおそらく問題はなさそうですね!
      (breakpointで効くオプション効かないオプションは全て把握はしてないので、その部分はわかりませんが)
      一旦問題は解決?でいいですかね?
      paginationも複数設置する際にはクラスを分ける必要があるので、もし1つ目のswiperにもページネーションをって話になった場合はクラスに注意してみてください!

      1. レーウィンさん

        ご返信ありがとうございます。
        矢印ボタンのクラス名は

        swiper-button-next
        swiper-button-prev

        だけしか使えないのでしょうか。

        多分、ここをリネームすればいけそうなのですが
        リネームをするとCSS側で調整が必要なのでしょうか。

        よろしくお願いします。

        1. 光のプログラマーさん

          クラス名はswiper-button-prev02等にしても問題ありません。
          ただ、swiper-button-prevと全く同じものをswiper-button-prev02にしたい場合はcssの編集が必要になります。
          テキストエディタの検索機能を使用すれば、そこまで数は多くなかったと思うので、あまり時間はかからないですよ!

          1. レーウィンさん

            ご返信ありがとうございます。
            それでは、クラス名を変更してCSSで調整してみます。

            ご質問を連投してしまい、お手を煩わせてしまい申しわけありませんでした。

  8. レーウィンさん

    いつもお世話になっています。

    例えば、3枚のスライドがあって、次にある半分見えているスライドをクリックするとそのスライダーに移動する、という実装はどのようにやるのでしょうか?

    nextボタンやprevボタンを押さなくても次のスライドをクリックすると移動させたいのですが、なかなかうまくいかず…

    教えていただけると助かります

    1. ゴリコップさん
      コメントありがとうございます!外出中なので簡単な返信で失礼します。
      パッとでた方法としては、左右のスライダーの上に透明のdivを設置して、それをクリックした時に左右にスライドさせる方法ですね!
      メソッドのmySwiper.slideNext等と組み合わせてみてください!

      1. レーウィンさん

        お忙しい中、お返事いただきありがとうございます!
        ありがとうございます。試してみます!

コメントを残す

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

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