Swiperで無限ループスライダーを作成する方法【バグを防ぐ注意点も解説！】
コードのこと
流れ続ける無限ループスライダーっておしゃれですよね♪
今回は、Swiperを使って無限ループスライダーを作成する方法についてお話しします。
無限ループスライダーは、スライドが途切れずに続いていくので、印象的なWEBデザインによく使われます。
ただし、実装時いくつかの注意点があるので、それもしっかり解説します！
↓スライダーデモです
もくじ
無限ループするSwiperの書き方
コード全体
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<title>Swiper Loop</title>
<style>
.swiper-container{
overflow: hidden;
}
.swiper-wrapper{
transition-timing-function: linear;
}
img{
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/cat01.webp"></div>
<div class="swiper-slide"><img src="./img/cat02.webp"></div>
<div class="swiper-slide"><img src="./img/cat03.webp"></div>
<div class="swiper-slide"><img src="./img/cat04.webp"></div>
</div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.swiper-container', {
slidesPerView: 2, // 一度に表示するスライドの数
spaceBetween: 10, // スライド間の余白（ピクセル単位）
speed:10000,
loop: true, // ループさせる
autoplay: {
delay: 0,
},
});
</script>
</body>
</html>Swiperで無限ループスライダーを作る時の注意点
【注意点1】Swiperの基本ファイルを読み込む
//CSSの読み込み
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
//JavaScriptの読み込み
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>↑のコードではCDNで読み込んでいますが、長く安定的にサイト運営する場合はダウンロードして使うのがおすすめです。初めてファイルをダウンロードする方は以下の記事を参考にしてね！
【注意点2】.swiper-wrapperのCSSにtransition-timing-function: linear;を付ける
無限ループを滑らかに見せるためには、.swiper-wrapperのCSSにtransition-timing-function: linear;を付けることが大事です。これで、スライドの動きが一定になります。
※このCSSを追加しないとloopの動きが一定でなく、途中で一瞬止まり、また動き出すという動作になります。
.swiper-wrapper {
transition-timing-function: linear;
}【注意点3】slidesPerViewの2倍以上の.swiper-slideを準備する
表示するスライド数（slidesPerView）の2倍以上のスライドを用意しないと無限ループが途中で止まりったり途中で途切れた表示になることがあります。例えば、slidesPerViewが2の場合、少なくとも4つ以上のスライドが必要です。スライドが少ないとループが途切れたように見えるので注意しましょう。
スライダーの外にスライドがはみ出さないように、.swiper-containerにoverflow: hidden;を付けます。これで、スライドがきれいに収まります。
この対処をしないと右にはみ出た分の余白が追加されガタガタします。
Swiperで無限ループスライダーを作成する方法のまとめ
無限ループスライダーを作成する際の基本設定と注意点をお話ししました。以下のポイントを押さえて、きれいでスムーズなループスライダーを作りましょう。
- Swiperの基本ファイルを読み込む
- .swiper-wrapperのCSSに
transition-timing-function: linear;を付ける - slidesPerViewの2倍以上のスライドを準備する
- .swiper-containerに
overflow: hidden;を付ける
これらのポイントをしっかり守れば、無限ループスライダーがうまく動作しますよ！
ぜひ試してみてくださいね。
