CSSのみで作る無限ループスライダー(横方向・縦方向)。仕組みとポイントも併せて解説

ウェブサイトにカルーセル型のスライダーを実装する場合、「slick」や「Swiper」といったJavaScriptライブラリの使用が一般的です。

しかし、特定の方向に無限ループするシンプルなスライダーであれば、HTMLと数十行程度のCSSだけで簡単に実装できます。以下、デモと仕組みを解説していきます。

横方向のデモ

See the Pen CSSで作る無限ループスライダー(横方向) by MEMORUKA (@memoruka) on CodePen.

縦方向のデモ

See the Pen (縦方向) CSSで作る無限ループスライダー by MEMORUKA (@memoruka) on CodePen.

概要

ポイント：アニメーションを付与するのは、コンテンツではなく親要素(スライダー)

まず、スライドアニメーションを設定する対象は一見コンテンツのように思えますが、実際はそれらの親要素であるスライダーの方にアニメーションを設定します。
コンテンツが並ぶ方向と、スライドする方向を一致させることでカルーセルの状態を作ります。

CSS

/* スライドアニメーションの設定 */
@keyframes horizontal-animation {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

/* スライダーを表示する親コンテナ */
.slider-container {
    display: flex;
    overflow: hidden;
}

/* スライダー本体 */
.slider-wrapper {
    display: flex;
    animation: horizontal-animation 30s linear infinite;
}

/* スライドコンテンツ */
.slide {
    width: 400px;
    margin-right: 20px;
}

.slide img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* ホバー時の一時停止用 ※任意 */
@media (hover: hover) {

    .slider-container:hover .slider-wrapper {
        animation-play-state: paused;
    }

}

HTML

<div class="slider-container">
  <div class="slider-wrapper">
    <div class="slide">
      <img src="./1.jpg" alt="">
    </div>
    <div class="slide">
      <img src="./2.jpg" alt="">
    </div>
    <div class="slide">
      <img src="./3.jpg" alt="">
    </div>
  </div>

  <div class="slider-wrapper">
    <div class="slide">
      <img src="./1.jpg" alt="">
    </div>
    <div class="slide">
      <img src="./2.jpg" alt="">
    </div>
    <div class="slide">
      <img src="./3.jpg" alt="">
    </div>
  </div>
</div>

無限ループの仕組み

途切れることなく無限にスライドさせるために、スライドアニメーションと同じ方向に、スライダーを複製しておく必要があります。

例えば「横方向のデモ」では、スライダーの親要素にflexを設定し、同じスライダーが横に連結している状態を作ります。

そうすることにより1つ目のスライダーが完全に親要素の外に出た瞬間、2つ目のスライダーの到達点とまったく同じ位置からアニメーションがループすることで、まるで無限に横方向(縦方向)にコンテンツが複製されているように「見える」仕組みです。

See the Pen (仕組み解説用キャプション付き) CSSで作る無限ループスライダー by MEMORUKA (@memoruka) on CodePen.

わかりやすいようにキャプション付きのデモ。2つ目のスライダーが左端の終点に到着した瞬間にループがかかり、一見、無限に画像が複製されているように「見える」。

空白が出来て途切れたり、ループが自然に見えない時の確認事項

うまくループしているように見えない時は、以下の点を確認してみてください。

ループする前に空白ができる場合(途切れる)

スライダーの親要素の幅(または高さ)に対してコンテンツの数が少ない、もしくはサイズが小さいと、ループが実行される前にスライダーが終点を迎えてしまい、空白が生じます。

よって、ループ実行前にコンテンツが途切れないようにスライダーを複製することがポイントです。大抵は1つ複製するだけで解決しますが、親要素のサイズに応じて2つ、3つと複数が必要になる場合があります。

ループが自然に見えない場合(カクッとズレるなど)

スライダーの終点とループする位置がずれていると、ループが自然に見えず、不自然にカクっとズレたりします。特に縦方向にmarginやgapで余白を設定していると発生しがちです。ループを自然に見せるには、「終点」と「始点」の位置をしっかり合わせる必要があります。

「縦方向のデモ」では、スライダーをgridに変換し、子要素(コンテンツ)のmargin-bottomを全て内包することで、最後のコンテンツが余白部分も含めて終点になるよう調整しています。単純にpadding-bottomを使う手もあります。

まとめ

以上、CSSのみで作る無限ループスライダーでした。
「次へ」ボタンや「スワイプ」といったユーザー操作が不要で、単純にページ背景の装飾として動きが欲しい場合には、この手法で十分対応できると思います。