CSS Flexboxで無限ループするスライダー／カルーセルを実装する方法

CSSのFlexboxとJavaScriptを組み合わせることで、無限にスクロールし続けるスライダー（カルーセル）を簡単に実装できます。本記事では、前後ボタンで切り替えるカルーセルと、CSSアニメーションだけで自動的に流れ続けるスライダーの2つのサンプルを紹介します。

例1：JavaScriptを使ったカルーセル

以下の例では、左右の矢印ボタンをクリックすると画像が切り替わり、最後のスライドからは最初に戻る（逆も同様）無限ループ型のカルーセルを実装しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            width: 100%;
         }
         .container {
            max-width: 600px;
            position: relative;
            margin: 6% auto;
         }
         .prevbtn, .nextbtn {
            position: absolute;
            top: 50%;
            padding: 12px;
            margin-top: -20px;
            color: white;
            font-weight: bold;
            cursor: pointer;
            transition: 0.2s ease-in;
            border-radius: 50%;
         }
         .prevbtn:hover, .nextbtn:hover {
            background-color: darkgrey;
            color: rgb(0,0,0);
         }
         .nextbtn {
            right: 0;
         }
      </style>
   </head>
   <body>
      <div class="container">
         <div class="slide">
            <img src="https://images.unsplash.com/photo-1609517904792-bac493d55556?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" />
         </div>
         <div class="slide">
            <img src="https://images.unsplash.com/photo-1609883475382-c4c9378569e5?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" />
         </div>
         <div class="slide">
            <img src="https://images.unsplash.com/photo-1610258648552-fe6407d664a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" />
         </div>
         <div class="slide">
            <img src="https://images.unsplash.com/photo-1610258648552-fe6407d664a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" />
         </div>
         <div class="slide">
            <img src="https://images.unsplash.com/photo-1611094607507-8c8173e5cf33?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" />
         </div>
         <a class="prevbtn" onclick="changeSlide(-1)">❮</a>
         <a class="nextbtn" onclick="changeSlide(1)">❯</a>
      </div>
      <script>
         let slideIndex = [1,1];
         viewSlides(1);
         function changeSlide(n) {
            viewSlides(slideIndex[0] += n);
         }
         function viewSlides(n) {
            let ele = document.getElementsByClassName("slide");
            if (n > ele.length) {
               slideIndex[0] = 1
            }
            if (n < 1) {
               slideIndex[0] = ele.length
            }
            for (i = 0; i < ele.length; i++) {
               ele[i].style.display = "none";
            }
            ele[slideIndex[0]-1].style.display = "block";
         }
      </script>
   </body>
</html>

このコードを実行すると、次のような出力が得られます。矢印ボタンを押すたびにスライドが切り替わり、範囲外に達しても自動的に先頭・末尾へ巻き戻るため、実質的に無限に操作できます。

CSS Flexboxで無限ループするスライダー／カルーセルを実装する方法

仕組みのポイント

slideIndex配列： 現在表示中のスライド番号を管理します。
changeSlide()関数： ボタンのクリックに応じてインデックスを増減させます。
viewSlides()関数： インデックスがスライド数を超えたら1に、1未満になったら最終スライドに戻すことで、無限ループを実現しています。
表示切替： 一度すべてのスライドを非表示（display: none）にしてから、該当スライドのみ表示（display: block）します。

例2：CSSアニメーションだけで動く自動スライダー

次の例では、JavaScriptを使わず、CSSの@keyframesアニメーションのみで背景画像が横方向に永遠に流れ続けるスライダーを作成しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .container {
            height: 120px;
            max-width: 600px;
            margin: 12px auto;
            position: relative;
            overflow: hidden;
            transform: translate3d(0, 0, 0);
            border: 4px ridge rgba(20,30,240,0.6);
         }
         .container > div {
            height: 120px;
            width: 2400px;
            background: url(https://images.unsplash.com/photo-1611485916153-fce531587fe0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=120&ixlib=rb-1.2.1&q=80&w=120);
            position: absolute;
            height: 100%;
            transform: translate3d(0, 0, 0);
         }
         .container .slider {
            animation: slideshow 20s linear infinite;
         }
         @keyframes slideshow {
            100% {
               transform: translateX(-33.33%);
            }
         }
      </style>
   </head>
   <body>
      <div class="container">
         <div class="slider"></div>
      </div>
   </body>
</html>

このコードを実行すると、次のように画像が一定速度で左へ流れ続け、アニメーションが無限に繰り返されます。

CSS Flexboxで無限ループするスライダー／カルーセルを実装する方法

仕組みのポイント

overflow: hidden： コンテナからはみ出した部分を隠し、見た目上シームレスなスクロールを実現します。
translateX(-33.33%)： 背景画像を全体幅の1/3分だけ移動させることで、パターンがつながる位置まで移動した時点でアニメーションが再開され、継ぎ目なくループします。
linear + infinite： 速度に緩急をつけず一定間隔で永続的にアニメーションを繰り返します。
translate3d： GPUによるハードウェア加速を利用し、滑らかな描画性能を確保しています。

まとめ

手動でスライドを操作したい場合はJavaScriptでのインデックス管理が有効であり、自動的に流れるバナーなどを作りたい場合はCSSアニメーションだけでも十分に対応できます。用途に応じて両者を使い分けることで、軽量かつ柔軟なカルーセルUIを構築できます。

CSS FlexboxでDIV要素を左・中央・右に配置する方法｜justify-contentの使い方

CSS Flexboxを使ってコンテナ内の要素を左右に配置する方法

CSS Flexboxでアイテムに固定幅を設定する方法
はじめにCSSのflexプロパティは、フレックスコンテナ内のアイテムのサイズを柔軟に制御できる強力なツールです。このプロパティを活用することで、アイテムを自由に伸縮させたり、逆に固定幅を維持させたりすることが可能になります。本記事では、flexプロパティの基本的な構文と、実際のコード例を通じて、フレックスアイテムに固定幅を設定する方法を詳しく解説します。 CSS flexプロパティの構文 CSSのflexプロパティは、次のように記述します。 Selector { flex: /*値*/ } flexプロパティには、主に以下の3つの値を組み合わせ
CSSの::first-line疑似要素で段落の最初の行をおしゃれに装飾する方法
CSSの::first-line疑似要素を使用すると、ブロックレベル要素の「最初の行」だけにスタイルを適用できます。雑誌や新聞の記事のように段落の冒頭を目立たせたい場合に便利なセレクターで、フォントサイズ・色・影などの装飾を簡単に加えられます。ここでは、::first-line疑似要素の具体的な使用例を2つ紹介します。例1：文字サイズ・色・影を変更する<!DOCTYPE html> <html> <head> <style> body { text-align: center; &nbs