Swiperでループにしているのに次のスライドが表示されない

はじめに

Swiperを利用していて困ったことがあったのでまとめます

問題

Swiperでスライダーを作成しました
ループに設定したのですが、末尾まで行くと次のスライドがなぜか表示されませんでした

(画像はサンプルでサッポロビールからお借りしました)

本来であれば右に最初のスライドが表示されるはずでした

解決方法

コンソールに以下の注意がでていました

Swiper Loop Warning: The number of slides is not enough for loop mode, it will be disabled and not function properly. You need to add more slides (or make duplicates) or lower the values of slidesPerView and slidesPerGroup parameters

スライド数が少ないと症状が出ることが判明
スライド数を3から7にかえたところうまく行くようになりました。

おわりに

以下のサイトでスタイルを整えるといい感じになります。

参考