【Swiper V11】loopモードとwidthを併用した際のバグの解消方法

公開:2024/06/15

JavaScript

スライダー系ライブラリ「Swiper」でスライドの横幅を指定する際には、主に2つの方法があります。

slidesPerView：スライドの表示枚数を固定する。
width：スライドの横幅を固定する。

この2つの方法のうち、slidesPerViewとloopモードの組み合わせは問題なく動作します。しかし、widthとloopモードの組み合わせには注意が必要です。適切な対策をしないと、途中からスライドが途切れてしまうバグ（？）が発生することがあります。

今回は、この問題に対する対策について詳しく見ていきましょう。

【バグ】スライドが途中から途切れるバグを見ていきましょう

スライドは5枚で、loopモードとwidthを組み合わせていますが、何も対策を行わないと途中からスライドが途切れてしまいます。

サンプルサイトを別タブで開く
 サンプルサイトのコードみる

ソースコード

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <figure>
        <img src="https://picsum.photos/seed/picsum/300/200" alt="" width="300" height="200">
        <figcaption>スライド1</figcaption>
      </figure>
    </div>
    <div class="swiper-slide">
      <figure>
        <img src="https://picsum.photos/seed/picsum/300/200" alt="" width="300" height="200">
        <figcaption>スライド2</figcaption>
      </figure>
    </div>
    <div class="swiper-slide">
      <figure>
        <img src="https://picsum.photos/seed/picsum/300/200" alt="" width="300" height="200">
        <figcaption>スライド3</figcaption>
      </figure>
    </div>
    <div class="swiper-slide">
      <figure>
        <img src="https://picsum.photos/seed/picsum/300/200" alt="" width="300" height="200">
        <figcaption>スライド4</figcaption>
      </figure>
    </div>
    <div class="swiper-slide">
      <figure>
        <img src="https://picsum.photos/seed/picsum/300/200" alt="" width="300" height="200">
        <figcaption>スライド5</figcaption>
      </figure>
    </div>
  </div>
</div>

const swiper = new Swiper(".swiper", {
  loop: true,
  width: 200,
  spaceBetween: 40,
  speed: 1000,
  autoplay: {
    delay: 1000,
  },
});

【解決策】バグを解消していきましょう！

サンプルサイトを別タブで開く
 サンプルサイトのコードみる

ソースコード

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <figure>
        <img src="https://picsum.photos/seed/picsum/300/200" alt="" width="300" height="200">
        <figcaption>スライド1</figcaption>
      </figure>
    </div>
    <div class="swiper-slide">
      <figure>
        <img src="https://picsum.photos/seed/picsum/300/200" alt="" width="300" height="200">
        <figcaption>スライド2</figcaption>
      </figure>
    </div>
    <div class="swiper-slide">
      <figure>
        <img src="https://picsum.photos/seed/picsum/300/200" alt="" width="300" height="200">
        <figcaption>スライド3</figcaption>
      </figure>
    </div>
    <div class="swiper-slide">
      <figure>
        <img src="https://picsum.photos/seed/picsum/300/200" alt="" width="300" height="200">
        <figcaption>スライド4</figcaption>
      </figure>
    </div>
    <div class="swiper-slide">
      <figure>
        <img src="https://picsum.photos/seed/picsum/300/200" alt="" width="300" height="200">
        <figcaption>スライド5</figcaption>
      </figure>
    </div>
    <!-- スライドの枚数を2倍に複製 -->
    <div class="swiper-slide">
      <figure>
        <img src="https://picsum.photos/seed/picsum/300/200" alt="" width="300" height="200">
        <figcaption>スライド1</figcaption>
      </figure>
    </div>
    <div class="swiper-slide">
      <figure>
        <img src="https://picsum.photos/seed/picsum/300/200" alt="" width="300" height="200">
        <figcaption>スライド2</figcaption>
      </figure>
    </div>
    <div class="swiper-slide">
      <figure>
        <img src="https://picsum.photos/seed/picsum/300/200" alt="" width="300" height="200">
        <figcaption>スライド3</figcaption>
      </figure>
    </div>
    <div class="swiper-slide">
      <figure>
        <img src="https://picsum.photos/seed/picsum/300/200" alt="" width="300" height="200">
        <figcaption>スライド4</figcaption>
      </figure>
    </div>
    <div class="swiper-slide">
      <figure>
        <img src="https://picsum.photos/seed/picsum/300/200" alt="" width="300" height="200">
        <figcaption>スライド5</figcaption>
      </figure>
    </div>
  </div>
</div>

HTMLのポイント

表示するスライドの枚数は5枚ですが、複製して倍の枚数にしています。

手動で複製しても良いですが、修正が必要になった場合に2箇所修正する必要があります。
なので、JSを使ってswiper-wrapper 要素の子要素を複製する処理を行ってもOKです！

※今回は手動で複製しています。

const swiper = new Swiper(".swiper", {
  loop: true,
  width: 200,
  spaceBetween: 40,
  speed: 1000,
  autoplay: {
    delay: 1000,
  },

  virtual: {
    enabled: true, // バーチャルスライドを有効にします。
    addSlidesAfter: 5, // 事前にレンダリングする枚数。スライドの枚数が入ります。
  },
});

JavaScriptのポイント

Virtual Slidesで、仮想スライドを使用しています。