Swiperで途切れることなくループする
今回は空のスライドを挟むことなく自然な流れでループさせる方法について解説します。
Swiperの公式のリンクは以下です。
概要
デモ動画のように途切れることなくループさせる方法の解説です。
要件は以下です。
- 10枚のスライドを4枚単位でスライドさせる
- 無限にループする
- 枚数が足りない部分は空白のスライドを作らない
コード解説
HTMLやCSSについては解説を割愛します。ポイントはJavaScriptのこの部分です。
const swiper = new Swiper('.swiper', {
// Optional parameters
loop: true,
loopAddBlankSlides: false,
slidesPerView: 4,
slidesPerGroup: 4,
オプションを１つずつ解説します。
loop: true
スライドの端まできても続けてループできるようにします。
デフォルトではスライドの端までくるとそれ以上「次へ」や「前へ」などの
ボタンをクリックしても動きません。
それを永遠に押し続けて最後まで来たらまた最初に戻ることができるようにするオプションです。
loopAddBlankSlides: false
ループする際にからのスライドを追加させないオプションです。
デフォルトでは端に来た時にスライドが足りないとからのスライドを追加します。
ですが空のスライドを追加してしまうと以下のように、
コンテンツが何もないスライドが表示されてしまって見栄えが良くないです。
そこでこのオプションを追加することで、空のスライドを追加せずデモ動画のように
頭のスライドを詰めてループすることが可能です。
slidesPerView: 4
一度に表示させるスライドの数を指定するオプションです。
spaceBetween: 20のようにスライド間に余白をつけている場合、
ピッタリ入り切らないことがあるので幅や余白は調整が必要です。
（今回はCSSの方でざっくり調整しました）
slidesPerGroup: 4
まとめてスライドさせる枚数の指定です。
slidesPerView: 4は一度に画面に表示させる枚数でしたが、
このままではボタンを押した時に1枚ずつスライドするだけになります。
これを4枚まとめて動かしたい！というような時に使うオプションです。
まとめ
いかがでしたでしょうか？SwiperはjQueryも必要ありませんし、
ある程度オーソドックスなスライドを実装するにはとても簡単に使えるので、
ぜひお試しください！
Discussion