【Swiper】一定速度で流れ続ける無限ループスライダーの作り方（コピペOK）
ロゴや画像が横にスーッと流れ続ける「帯スライダー」、見たことはありませんか？
お店のロゴやお知らせなど、常に動かしておきたい要素にぴったりの演出です。
今回は、スライダー系プラグイン「Swiper」を使って、
横に一定速度で流れ続ける無限ループスライダーを作る方法をご紹介します。
コピペで使えるサンプルもあるので、初めての方でも安心です。
2.HTML（基本の形）
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
<div class="logo-belt">
<div class="swiper belt-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/logo01.png" alt="Logo 1"></div>
<div class="swiper-slide"><img src="img/logo02.png" alt="Logo 2"></div>
<div class="swiper-slide"><img src="img/logo03.png" alt="Logo 3"></div>
<div class="swiper-slide"><img src="img/logo04.png" alt="Logo 4"></div>
<div class="swiper-slide"><img src="img/logo05.png" alt="Logo 5"></div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>3. CSS（一定速度のカギはこれ
.logo-belt {
overflow: hidden;
}
.belt-swiper .swiper-wrapper {
transition-timing-function: linear !important;
}
.belt-swiper .swiper-slide {
width: auto;
display: flex;
align-items: center;
padding: 0 24px;
}
.belt-swiper img {
display: block;
height: 48px;
width: auto;
}💡 ポイントtransition-timing-function: linear; を .swiper-wrapper に必ず入れましょう。
これがないと速度が伸び縮みして、端で「モタつき」が発生します。
4. JavaScript（動きの設定）
<script>
const swiper = new Swiper('.belt-swiper', {
loop: true,
slidesPerView: 'auto',
allowTouchMove: false,
speed: 6000,
autoplay: {
delay: 0,
disableOnInteraction: false,
pauseOnMouseEnter: false
}
});
</scr<!-- -->ipt>5. よくあるエラーと解決法
Loop Warning が出る場合
Loop Warning: The number of slides is not enough for loop modeこのエラーは、スライドの枚数や合計幅が足りないときに出ます。
解決方法
- スライド画像を増やす
- 同じスライドを複製して幅を稼ぐ
slidesPerViewやspaceBetweenを調整する
目安：スライド全体の幅は、表示エリア（コンテナ）の2倍以上が理想です。
6. 仕上げのちょっとした工夫
- レスポンシブ対応
@media (min-width: 768px) {
.belt-swiper img { height: 64px; }
}- ホバーで止めたい場合
autoplay: {
delay: 0,
disableOnInteraction: false,
pauseOnMouseEnter: true
}- 見た目をきれいにするポイント
画像はできるだけ同じ高さや比率にそろえておくと、動きが美しくなります。
まとめ
- linear + delay: 0 + 適切な speed でなめらかな動きに
- スライド幅はコンテナの2倍以上を確保
- 枚数不足のときは追加や複製で対応
この方法なら、シンプルなコードで「止まらない無限ループスライダー」が実装できます。
見た目の印象がぐっと変わるので、ぜひ試してみてくださいね。
