Swiperの
スクロールバーがおかしい！
初期設定が原因かも

手軽に高品質なスライダーが実装できる java script ライブラリ「Swiper」！

ここでは、「Swiper」でスクロールバーがなんだかおかしいな……、という時に確認したい初期設定についてまとめています。

スライダーの初期設定に「loop」を指定してるいる場合、それが原因かも知れません。

早速、見ていきましょう！

Swiperでスクロールバーの
連動位置がおかしい時は

「Swiper」のスクロールバーは、スライダーと連動していて、スライドが切り替わるとスクロールバーのポインターも連動して移動します。

正常に動くときは、きっちり左側から始まります。

でも、このポインター、なぜか真ん中あたりから始まって、また真ん中あたりに戻るといった、おかしな挙動になることがあります。

そんな時は、一度初期設定で「loop」が指定されていないかチェックしてみましょう。

もし「loop: true,」という記述があれば、削除するか「loop: false,」に変更します。

const swiper = new Swiper('.swiper',{
	loop: false,
});

あとは、ページのキャッシュを削除してから、ページを再表示してみましょう。

もし「loop」指定が原因であれば、これでスクロールバーが正常に戻ると思います。

でも、なぜ？

それは、「Swiper」の仕様にあります。

Swiperでスクロールバーが
loop時におかしい理由

「Swiper」では「loop」を有効にすると、ループ時に内部でスライドが複製されることでループ表示を実現しています。

「Swiper」のスクロールバーには、このコピースライド分も反映される仕様になっているため、「loop」指定を有効にすると位置がずれてしまうようです。

「loop」を無効にしても、「autoplay」で「スライドの最後になると最初のスライドに戻る」という動きになるので、スライダーの自動再生が止まってしまうことはありません。

「loop」の動作を実装したい場合は、スクロールバーは削除か非表示に。

スクロールバーを実装したい場合は、「loop」を無効にして「autoplay」で自動再生する、といった選択になりそうです。