#34 最近のカルーセル 【ぴよぴよコーダーの開発日記】

少し前までは、スライダーやカルーセルといえば、「slick」というjQueryのプラグインを使っていたけれど、

最近はSwiper.jsというjQueryに依存しないライブラリで作っているものが増えてきたので試してみました。

デモ

参考：サンプル付き！簡単にスライドを作れるライブラリSwiper.js超解説（基礎編）

参考：スワイパーAPI

参考：Swiper.jsの使い方「レスポンシブ等の具体例」とオプション解説

少しはまったところは下記。

３つ表示の時は、３つ移動や１つ移動はできるけど、２つ移動はできない。つまり、slidesPerGroup: 2 　とはできない。やったらバグった。

slidesPerGroup: 3,
slidesPerView: 3,

３つ表示の時、全体の枚数が３で割り切れないときは、下記　loopFillGroupWithBlank: true　を入れないとバグる。

slidesPerView: 3,
slidesPerGroup: 3,
loopFillGroupWithBlank: true,