【swiper v11】スライドが3枚以下の時のループエラーへの対応【備忘録】

swiperを使って、コンテンツ幅から左右にスライドをはみ出させたスライドを作成していた時、スライドの枚数を減らした時に前後のスライドが欠けてしまったので、その時の対処を備忘録として書きます。

swiperのバージョン

・swiper v11.0.5

修正前のコード

 const swiper = new Swiper(".mySwiper", {
            centeredSlides: true,
            loop: true,
            loopAdditionalSlides: 1,

            autoplay: {
              delay: 2500,
              disableOnInteraction: false,
            },
            pagination: {
              el: ".swiper-pagination",
              clickable: true,
            },
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
          });

（幅600px以上で開くときれいに表示されます。）
このコードではコンテンツ幅から左右にスライドをはみ出させるスライドを作成しています。
スライド数が3枚以下になるとエラーが発生し、ループが正しく機能しなくなりました。

発生した問題

Swiper v11でスライド数が3枚以下の時、
・前後のスライドが一部欠けた。
・全部のスライドが表示されなかった。
↓このようなかんじ

ブラウザのコンソールに以下のようなエラー文がでました。

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

DoopLで翻訳してもらったところ、
「Swiper Loop 警告： スライド数がループモードには十分ではありません、それは無効になり、正常に機能しません。より多くのスライドを追加するか（または複製を作成する）、またはslidesPerViewとslidesPerGroupパラメータの値を下げる必要があります。」
とのこと。
スライド数を多くできる場合は多くすれば解決できると。
しかし今回はどうしても3枚以下でスライドをループさせる必要があったため、模索。

対応

swiperのバージョンをv8にダウングレードをしました。

公式ドキュメントを読んでみる

「loop」オブジェクトについて公式ドキュメントにて以下のような記述がありました。

Because of nature of how the loop mode works (it will rearrange slides), total number of slides must be:

• more than or equal to slidesPerView + slidesPerGroup
• even to slidesPerGroup (or use loopAddBlankSlides parameter)
• even to grid.rows (or use loopAddBlankSlides parameter)

ループさせるにはスライドに必要最低枚数があるということみたいです。
https://swiperjs.com/swiper-api#param-loop

ダウングレードで動いたことからバージョンの違いで何かあるもよう？
時間の都合上このような対応をしたが、力づく感が否めない。
上手な対処方法がありましたら教えていただきますと幸いです。