CSSだけで作る！滑らかにループするスライダーの実装方法

Posted on by

CSSだけで画像やコンテンツを横に流す「無限ループスライダー」を作りたい方は多いのではないでしょうか？
本記事では、JavaScriptなしでも実装できるループスライダーの作り方、そしてループ時に「一瞬止まる・戻る」問題を解消するテクニックまで詳しく解説します。

基本構造を理解しよう

CSSの@keyframesを使って、要素を左方向にtranslateXで移動させることで
「ループするように見せる」仕組みです。
まずは最も基本的な構造から。

HTMLの基本構造

<div class="slider-container">
  <div class="slider-track">
    <div class="slide"><img src="img01.jpg" alt=""></div>
    <div class="slide"><img src="img02.jpg" alt=""></div>
    <div class="slide"><img src="img03.jpg" alt=""></div>
    <!-- 複製 -->
    <div class="slide"><img src="img01.jpg" alt=""></div>
    <div class="slide"><img src="img02.jpg" alt=""></div>
    <div class="slide"><img src="img03.jpg" alt=""></div>
  </div>
</div>

画像をループさせるために、最初のスライド群をそのまま複製しています。

CSSの基本設定

.slider-container {
  overflow: hidden;
  width: 100%;
}

.slider-track {
  display: flex;
  animation: scrollLoop 20s linear infinite;
  will-change: transform;
}

.slide {
  flex-shrink: 0;
  width: 300px;
  margin-right: 20px;
}

@keyframes scrollLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-960px); /* 300px + 20px × 3枚分 */
  }
}

このようにして、スライドを滑らかに左に動かし、3枚分（半分）の距離をアニメーションさせています。

よくある問題：「ループ時にガクッと戻る」

ここで多くの人が直面するのが「ループのつなぎ目」で起こる一瞬の戻りやチラつきです。
これは以下のような原因によって発生します：

  • translateX の距離が正確でない（1pxズレている）
  • スライドの幅やマージンがブラウザにより解釈ブレする
  • 枚数が少なすぎてつなぎ目が見えてしまう

解決法1：px単位で正確に距離指定

@keyframes scrollLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-960px); /* 300+20×3=960px */
  }
}

このように -50% などの曖昧な指定ではなく、px単位で正確に指定することが重要です。

解決法2：JavaScriptで距離を自動計算する

HTMLや画像枚数が増減するたびにpxを手動で直すのは大変。
その場合は、JavaScriptで幅と枚数から距離を自動で計算し、CSS変数に渡す方法が便利です。

<script>
document.addEventListener("DOMContentLoaded", function () {
  const track = document.querySelector(".slider-track");
  const slides = track.querySelectorAll(".slide");

  const slideWidth = slides[0].offsetWidth;
  const margin = parseInt(getComputedStyle(slides[0]).marginRight || 0);

  const distance = (slideWidth + margin) * (slides.length / 2);
  track.style.setProperty("--scroll-distance", `-${distance}px`);
});
</script>

CSSではこのように変数を受け取るようにします。

@keyframes scrollLoop {
  0% { transform: translateX(0); }
  100% { transform: translateX(var(--scroll-distance)); }
}

解決法3：スライド複製を自動化する

HTMLに手動で同じスライドを繰り返し書くのも手間です。
JavaScriptを使えば、自動でスライドを複製し、無限ループ風に見せることができます。

const sliderTrack = document.querySelector(".slider-track");
const originalSlides = Array.from(sliderTrack.children);

originalSlides.forEach(slide => {
  const clone = slide.cloneNode(true);
  sliderTrack.appendChild(clone);
});

スマホ対応もOK！

flex-wrap: nowrap を使用しているので、スマホでもそのまま横スクロールに対応できます。
画面サイズに応じて slide の width を % に変えても同様のテクニックが使えます。

最終まとめ

ポイント内容
スライダーを流すには @keyframes + translateX を使う
つなぎ目のガクツキは「距離のズレ」が原因
正確な px 単位で指定 or JSで計算して渡すのが最強
HTMLはシンプルでも、JSで複製＋距離調整すれば完璧

おまけ：Swiperとの違いは？

  • Swiperは機能が豊富（スワイプ、ナビゲーションなど）
  • CSSループは軽量で読み込みが速く、単純な装飾に最適
  • 画像を流すだけならCSSアニメーションの方がトラブルが少ない！

デモ付きテンプレートも配布可能！

こちらのリンクからダウンロード可能です。

https://teach.web-represent.link/css_loop_slider_template.zip

何枚でも追加OK＆ズレないループスライダー、ぜひあなたのサイトでも使ってみてくださいね！