[swiper.js] loop:trueの挙動がおかしくなる

前提・実現したいこと

swiper.jsを利用して、サイト内にスライドショーを設置しています。

swiper.jsの動きを設定するJSファイルの中で、

loop:true

の設定にすると、対象のスライドショーの動きがおかしくなってしまいます。

■問題となる動き

最後に設置するdivの内容（class="swiper-slideに指定したもの）が表示されない。

（例えば、４つのdivを設置すると、４つ目が表示されない、３つのdivを設置すると３つ目が表示されない）

paginationの表示は設置したdivの数だけ表示される
loop:trueをloop:falseにすると正常に表示され動く

このような状況なのですが、解決の方法ご存知の方おりましたら、ご教授いただけないでしょうか？

該当のソースコード

html
1<!--一部省略-->
2
3<div class="swiper-container swiper-container-photo-3d">
4    <div class="swiper-wrapper swiper-wrapper-photo" >
5      <div class="swiper-slide">
6        <canvas id="myCanvas"></canvas>
7      </div>
8      <div class="swiper-slide">
9        <canvas id="myCanvas2"></canvas>
10      </div>
11      <div class="swiper-slide">
12        <canvas id="myCanvas3"></canvas>
13      </div>
14    </div>
15    <!-- Add Pagination -->
16    <div class="swiper-pagination swiper-pagination-white"></div>
17    <!-- Add Arrows -->
18    <div class="swiper-button-next swiper-button-white"></div>
19    <div class="swiper-button-prev swiper-button-white"></div>
20  </div>
21
22<!--一部省略-->
23
24<script src="static/scripts/libs/photos.js"></script>

＊同サイト内に、複数のスライドショーを設置しているため、
class="swiper-container"と、class="swiper-wrapper"のdivに複数のclassを指定しています。

photos.js

JS
1var swiper = new Swiper(".swiper-container-photo-3d", {
2  spaceBetween: 30,
3  effect: "fade",
4  pagination: {
5    el: ".swiper-pagination",
6    clickable: true,
7  },
8  loop: true,
9  speed: 1000,
10  autoplay: {
11    delay: 6000,
12    disableOnInteraction: false,
13  },
14  navigation: {
15    nextEl: ".swiper-button-next",
16    prevEl: ".swiper-button-prev",
17  },
18});