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

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

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

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

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

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

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

<!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>

/* ページ全体 */
body{
  margin:0;  /* ページ外側の余白 */
  padding:40px 20px;  /* ページ内側の余白 */
  background:#f8fafc;  /* 背景色 */
  font-family:sans-serif;  /* フォント */
}

/* 無限ループ画像スライダー全体 */
.infinite-image-slider_demo{
  max-width:760px;  /* 最大横幅 */
  margin:0 auto;  /* 中央寄せ */
}

/* 画像表示エリア */
.infinite-image-slider_box{
  overflow:hidden;  /* はみ出した画像を隠す */
  border:1px solid #dbeafe;  /* 枠線 */
  border-radius:18px;  /* 角丸 */
  background:#ffffff;  /* 背景色 */
  box-shadow:0 10px 30px rgba(15,23,42,.08);  /* 影 */
}

/* 横に動くスライド一覧 */
.infinite-image-slider_track{
  display:flex;  /* 横並び */
}

/* スライド */
.infinite-image-slider_slide{
  flex:0 0 100%;  /* 1画面に1枚表示 */
}

/* 画像 */
.infinite-image-slider_slide img{
  display:block;  /* 画像下の余白を消す */
  width:100%;  /* 横幅いっぱい */
  height:auto;  /* 縦横比を保つ */
}

/* 操作ボタン */
.infinite-image-slider_controls{
  display:flex;  /* 横並び */
  justify-content:center;  /* 中央寄せ */
  gap:16px;  /* ボタン間隔 */
  margin-top:24px;  /* 上余白 */
}

/* 前へ・次へボタン */
.infinite-image-slider_button{
  padding:12px 28px;  /* 内側余白 */
  border:none;  /* 枠線なし */
  border-radius:999px;  /* 丸いボタン */
  background:#2563eb;  /* 背景色 */
  color:#ffffff;  /* 文字色 */
  font-size:16px;  /* 文字サイズ */
  font-weight:700;  /* 太字 */
  cursor:pointer;  /* カーソル */
}

// 横に動くスライド一覧を取得
const infiniteImageSliderTrack=document.getElementById("infinite-image-slider-track");

// スライドをすべて取得
const infiniteImageSliderSlides=document.querySelectorAll(".infinite-image-slider_slide");

// 前へボタンを取得
const infiniteImageSliderPrev=document.getElementById("infinite-image-slider-prev");

// 次へボタンを取得
const infiniteImageSliderNext=document.getElementById("infinite-image-slider-next");

// 現在表示しているスライド番号
// 1 = 本来の1枚目の画像
let infiniteImageSliderIndex=1;

// 連打防止用
let infiniteImageSliderLock=false;

// 初期位置を本来の1枚目へ移動
infiniteImageSliderTrack.style.transform="translateX(-100%)";

// スライドを移動する
function infiniteImageSliderMove(){

  // アニメーション中はクリックを受け付けない
  infiniteImageSliderLock=true;

  // スライド速度
  infiniteImageSliderTrack.style.transition="transform .45s ease";  // .45s = 0.45秒で切り替える

  // 現在の番号に合わせて横移動
  infiniteImageSliderTrack.style.transform=
    "translateX(-"+(infiniteImageSliderIndex*100)+"%)";

}

// 次へボタンをクリック
infiniteImageSliderNext.addEventListener("click",function(){

  // アニメーション中なら処理しない
  if(infiniteImageSliderLock){
    return;
  }

  // 次の画像へ移動
  infiniteImageSliderIndex++;

  // スライド移動
  infiniteImageSliderMove();

});

// 前へボタンをクリック
infiniteImageSliderPrev.addEventListener("click",function(){

  // アニメーション中なら処理しない
  if(infiniteImageSliderLock){
    return;
  }

  // 前の画像へ移動
  infiniteImageSliderIndex--;

  // スライド移動
  infiniteImageSliderMove();

});

// スライド移動が終わった時
infiniteImageSliderTrack.addEventListener("transitionend",function(){

  // 最後の複製まで進んだ場合、本来の1枚目へ瞬時に戻す
  if(infiniteImageSliderIndex===infiniteImageSliderSlides.length-1){

    infiniteImageSliderTrack.style.transition="none";

    infiniteImageSliderIndex=1;

    infiniteImageSliderTrack.style.transform="translateX(-100%)";

  }

  // 最初の複製まで戻った場合、本来の最後の画像へ瞬時に移動する
  if(infiniteImageSliderIndex===0){

    infiniteImageSliderTrack.style.transition="none";

    infiniteImageSliderIndex=infiniteImageSliderSlides.length-2;

    infiniteImageSliderTrack.style.transform=
      "translateX(-"+(infiniteImageSliderIndex*100)+"%)";

  }

  // クリックを再び許可
  infiniteImageSliderLock=false;

});

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルと、スライダーで使用する3枚の画像で構成されています。HTMLでは3枚の画像に加えて無限ループ用の複製画像を配置し、CSSでは画像を横並びにして表示エリアからはみ出した部分を隠します。JavaScriptでは前へ・次へボタンによるスライド移動と、複製画像へ到達したときに本来の画像へ瞬時に移動する処理を行い、途切れず繰り返し操作できる無限ループを実現します。

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

各ファイルの役割
index.htmlは無限ループする画像スライダー全体を構成するファイルです。本来表示する3枚の画像に加えて、先頭に3枚目の複製、最後に1枚目の複製を配置しています。この複製画像を利用することで、最初と最後の画像をまたぐときも通常のスライドと同じように移動できます。

style.cssはスライダーのレイアウトとデザインを設定するファイルです。画像を横方向へ並べ、表示エリアからはみ出した画像を非表示にします。また、スライダー全体の横幅、枠線、角丸、影、前へ・次へボタンのサイズや色などを変更できます。

script.jsは無限ループと画像切り替えを制御するファイルです。前へ・次へボタンがクリックされるとスライド番号を変更して横方向へ移動します。複製した画像まで移動した場合は、アニメーション終了後にtransitionを一時的に無効にして対応する本来の画像へ瞬時に移動します。また、移動中の連続クリックを防ぐ処理も含まれています。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、sample/images/へ使用する3枚の画像を保存します。index.htmlに記載されているimages/【ここに1枚目の画像ファイル名】などを、実際に配置した画像ファイル名へ変更してください。同じ画像を使用する複製部分についても、対応する画像ファイル名を同じ内容へ変更します。

ファイルを配置したあと、sample/index.htmlをブラウザで開きます。次へボタンをクリックすると次の画像、前へボタンをクリックすると前の画像へ移動します。3枚目からさらに次へ進むと1枚目へつながり、1枚目からさらに前へ戻ると3枚目へつながるため、両方向へ繰り返し操作できます。

カスタマイズできる内容
index.htmlではスライダーに表示する画像やalt属性を変更できます。画像を変更する場合は、本来の3枚だけでなく、無限ループ用として配置している先頭と最後の複製画像も対応する画像へ変更してください。

style.cssではスライダー全体の最大横幅、背景色、枠線、角丸、影、操作ボタンの間隔、サイズ、背景色、文字サイズなどを変更できます。script.jsではtransitionに指定している時間を変更することで、スライドの移動速度を調整できます。

数値調整
style.css
max-width:760px;
スライダー全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

border-radius:18px;
画像表示エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

box-shadow:0 10px 30px rgba(15,23,42,.08);
画像表示エリアの影です。10pxや30pxを変更することで、影の位置や広がりを調整できます。

gap:16px;
前へ・次へボタンの間隔です。値を大きくするとボタン同士の間隔が広がり、小さくすると狭くなります。

margin-top:24px;
画像表示エリアと操作ボタンの間隔です。値を大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:12px 28px;
前へ・次へボタンの内側余白です。12pxで上下、28pxで左右の大きさを調整できます。

border-radius:999px;
前へ・次へボタンの角丸です。大きな値を指定することで、左右が丸いボタンとして表示しています。

font-size:16px;
前へ・次へボタンの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。

script.js
transition="transform .45s ease"
画像が横方向へ移動する速度です。.45sは0.45秒で切り替わる設定です。値を大きくするとゆっくり移動し、小さくすると速く移動します。

translateX(-100%)
初期表示を本来の1枚目へ合わせるための移動量です。このサンプルでは先頭に複製画像を1枚配置しているため、最初に1スライド分だけ左へ移動しています。

レスポンシブ対応
このサンプルはスライダー全体にmax-width:760px;を指定し、各スライドをflex:0 0 100%としているため、表示領域の横幅に合わせて1枚ずつ表示されます。画像にもwidth:100%とheight:autoを指定しているため、横幅に合わせて縮小しながら縦横比を維持できます。スマートフォン・タブレット・PCでも同じ無限ループの仕組みで利用できます。