swiper js　スクロールバーの表示不備（バーの開始位置がおかしい）　カルーセル

前提・実現したいこと

・swiperを使用して、スライドを作成
画像下に画像の枚数に合わせたスクロールバーを表示したい

発生している問題・エラーメッセージ

・エラーメッセージは表示されておらず、動作自体は問題ない認識だが、
設定している画像枚数以上を認識されており、スクロールバーが正しく表示されていない
・1枚目の画像が表示されたときに、スクロールバーの左端ではなく2枚目を表すあたりの位置からバーが動き出し、
ループでもう一度1枚目が表示されたときに、スクロールバーの最後にバーがある

・Googleのディベロッパーツールでみたところ、なぜか以下のソースのはずが、
ファイル５→ファイル１→ファイル２→ファイル３→ファイル４→ファイル５→ファイル１
になっているように見える

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>Swiper demo</title> <link rel="stylesheet" href="css/swiper-bundle.min.css" media ="all"> <script type="text/javascript" charset="utf-8" src="js/swiper-bundle.min.js"></script>

<style>
body{
  width:100%;
}
.mySwiper{
  position: relative;
  width:878px;
  height:238px;
  margin: 0 auto;
}
.swiper-wrapper{
  margin-bottom: 10px;
}
.swiper-scrollbar{
  width:878px;
  margin-top: -22px;
  background: #ff0000;　//見やすいように一時的
}
.swiper-slide img{
  width: 876px;
  height:236px;
}
</style>

</head> <body>  <div class="swiper mySwiper"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="ファイル名１"></div> <div class="swiper-slide"><img src="ファイル名２"></div> <div class="swiper-slide"><img src="ファイル名３"></div> <div class="swiper-slide"><img src="ファイル名４"></div> <div class="swiper-slide"><img src="ファイル名５"></div> </div> <div class="swiper-scrollbar"></div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div>

<!-- Initialize Swiper -->
<script>
  var swiper = new Swiper(".mySwiper", {
    loop: true,
    autoplay: {
      delay: 1000, //ここで速さ
      disableOnInteraction: false,
    },
    scrollbar: {
      el: ".swiper-scrollbar",
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });
</script>

</body> </html>