Swiperの無限ループの作り方！CSSにちょこっと加えるだけですよ！

サイトにスライダーを追加できるJsのSwiper。

これかなり便利ですよね！私はサイト作りでスライダー系は全てSwiperにするほど重宝しています！

Swiperで無限ループを作る！

これ、ディフォルトじゃできないんですよね！

無限ループというのは、右から左（逆でもOK）に常にスライドが動き続けているスライドのこと。こんなやつです。

では実際のコードをご紹介します。

HTMLに書くSwiperはこちら

<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">コンテンツが入ります</div>
<div class="swiper-slide">コンテンツが入ります</div>
<div class="swiper-slide">コンテンツが入ります</div>
<div class="swiper-slide">コンテンツが入ります</div>
<div class="swiper-slide">コンテンツが入ります</div>
</div>
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
slidesPerView: 3,
centeredSlides: true,
spaceBetween: 30,
loop: true,
speed: 5000,
autoplay: {
delay: 0,
disableOnInteraction: false,
},
});
</script>

そして、CSSにこちらを追加するだけでOK！

.swiper-wrapper{transition-timing-function: linear !important;}

※!importantをつけないと優先順位で負けてしまうので、注意！

まとめ

Swiperの無限ループの作り方を検索すると「jsに○○を追加して～」とか「CSSにアニメーションを追加して～」とか無駄なコードを書かないといけないやり方を紹介するページも結構あります。

ただ実際はCSSにちょこっと追加するだけでOKなのです！ご参考にしてください！