無限ループする画像スライダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

スライダー

無限ループする画像スライダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

無限ループする画像スライダーをHTML・CSS・JavaScriptで作る方法を紹介します。最後の画像まで表示すると、そのまま自然な動きで最初の画像へ戻り、逆方向へ移動した場合も最後の画像へつながるため、途切れを感じにくいスライダーを実装できます。

このサンプルでは、スライダーの先頭と末尾に複製した画像を配置し、JavaScriptで表示位置を制御することでシームレスなループを実現しています。画像枚数が増えても同じ仕組みで動作するため、商品紹介やギャラリー、メインビジュアルなど幅広い用途で利用できます。

表示する画像は自由に差し替えられ、前へ・次へボタンで操作しても途切れなく画像が切り替わります。ライブラリを使わずに実装できるため、無限ループする画像スライダーの基本的な仕組みを学びたい方にもおすすめのサンプルです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

このデモでは、「前へ」「次へ」ボタンをクリックすると画像が横に切り替わります。最後の画像から次へ進むと最初の画像へ、最初の画像から前へ戻ると最後の画像へ自然につながる無限ループを確認できます。

画像3
画像1
画像2
画像3
画像1

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>無限ループする画像スライダー</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- 無限ループ画像スライダー全体 -->
  <div class="infinite-image-slider_demo">

    <!-- 画像表示エリア -->
    <div class="infinite-image-slider_box">

      <!-- 横に動くスライド一覧 -->
      <div class="infinite-image-slider_track" id="infinite-image-slider-track">

        <!-- 最後の画像の複製：無限ループ用 -->
        <div class="infinite-image-slider_slide">
          <img src="images/【ここに3枚目の画像ファイル名】" alt="画像3">
        </div>

        <!-- 画像1 -->
        <div class="infinite-image-slider_slide">
          <img src="images/【ここに1枚目の画像ファイル名】" alt="画像1">
        </div>

        <!-- 画像2 -->
        <div class="infinite-image-slider_slide">
          <img src="images/【ここに2枚目の画像ファイル名】" alt="画像2">
        </div>

        <!-- 画像3 -->
        <div class="infinite-image-slider_slide">
          <img src="images/【ここに3枚目の画像ファイル名】" alt="画像3">
        </div>

        <!-- 最初の画像の複製：無限ループ用 -->
        <div class="infinite-image-slider_slide">
          <img src="images/【ここに1枚目の画像ファイル名】" alt="画像1">
        </div>

      </div>

    </div>

    <!-- 操作ボタン -->
    <div class="infinite-image-slider_controls">

      <button class="infinite-image-slider_button" type="button" id="infinite-image-slider-prev">
        前へ
      </button>

      <button class="infinite-image-slider_button" type="button" id="infinite-image-slider-next">
        次へ
      </button>

    </div>

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

ファイル構成と設置方法

このサンプルは、HTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでスライダーのレイアウトを作成し、CSSで見た目を整え、JavaScriptで無限ループする画像スライダーを実装しています。表示する画像は sample/images/ フォルダへ配置して使用します。 

sample/
├── index.html
├── style.css
├── script.js
└── images/
    ├── 【ここに1枚目の画像】
    ├── 【ここに2枚目の画像】
    └── 【ここに3枚目の画像】

sampleフォルダをそのまま配置し、ブラウザで sample/index.html を開くと動作を確認できます。使用する画像は sample/images/ フォルダへ配置してください。各画像ファイル名は index.html の img タグの src 属性へ設定します。先頭と末尾の複製画像も同じ画像ファイル名へ変更してください。

スライダーの横幅や角丸、背景色などのデザインは style.css で変更できます。スライド速度は script.js の transform .45s ease で設定しており、.45s は0.45秒で画像が切り替わることを表します。数値を大きくすると切り替えがゆっくりになり、小さくすると速くなります。コードには連打防止処理も含まれているため、ボタンを連続でクリックしても正常に動作します。

コメント