サイトにスライダーを追加できる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なのです！ご参考にしてください！
