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

無限ループする画像スライダーを作る方法

画像を途切れることなく繰り返し切り替えられる、無限ループ式の画像スライダーを作る方法を紹介します。このサンプルでは、1枚の画像を表示し、左右の操作ボタンをクリックすると前後の画像へ横方向にスライドします。最後の画像から次へ進んだ場合も1枚目へ自然につながり、1枚目から前へ戻った場合も最後の画像へ同じ方向の動きを保ったまま移動できます。

通常のスライダーのように端で操作を止める必要がなく、左右どちらの方向にも繰り返し画像を切り替えられるのが特徴です。画像の下には現在表示している位置を示すドットを配置し、ドットをクリックすると対応する画像へ直接切り替えられます。写真ギャラリーや商品画像、作品紹介など、複数の画像を連続して閲覧できるようにしたい場面に利用できます。

HTMLでは先頭と末尾に画像を複製して配置し、CSSでは画像の大きさや角丸、横方向のスライドアニメーション、左右ボタンやドットのデザインを設定します。JavaScriptでは現在位置を管理し、複製した画像まで移動したあとにアニメーションなしで対応する本来の画像位置へ移動することで、連続してスライドしているように見せます。画面幅640px以下では画像や操作ボタンのサイズを調整し、スマートフォン・タブレット・PCで利用できます。

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

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

デモ

無限ループする画像スライダー

左右のボタンまたはドットをクリックすると、画像を途切れることなく繰り返し切り替えられます。

左右のボタンをクリックすると、画像が1枚ずつスライドしながら切り替わります。最後の画像から次へ進んだ場合も、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-slider_slider">

    <!-- 画像と左右ボタンを並べるエリア -->
    <div class="infinite-slider_area">

      <!-- 前の画像へ移動するボタン -->
      <button class="infinite-slider_button infinite-slider_prev" type="button" aria-label="前の画像">

        <!-- 左向きSVGアイコン -->
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M15 18l-6-6 6-6"></path>
        </svg>

      </button>

      <!-- 画像の表示領域 -->
      <div class="infinite-slider_view">

        <!-- 横方向へ移動する画像一覧 -->
        <div class="infinite-slider_track">

          <!-- 無限ループ用に複製した3枚目の画像 -->
          <div class="infinite-slider_slide">
            <img src="images/image3.png" alt="3枚目の画像">
          </div>

          <!-- 1枚目の画像 -->
          <div class="infinite-slider_slide">
            <img src="images/image1.png" alt="1枚目の画像">
          </div>

          <!-- 2枚目の画像 -->
          <div class="infinite-slider_slide">
            <img src="images/image2.png" alt="2枚目の画像">
          </div>

          <!-- 3枚目の画像 -->
          <div class="infinite-slider_slide">
            <img src="images/image3.png" alt="3枚目の画像">
          </div>

          <!-- 無限ループ用に複製した1枚目の画像 -->
          <div class="infinite-slider_slide">
            <img src="images/image1.png" alt="1枚目の画像">
          </div>

        </div>

      </div>

      <!-- 次の画像へ移動するボタン -->
      <button class="infinite-slider_button infinite-slider_next" type="button" aria-label="次の画像">

        <!-- 右向きSVGアイコン -->
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M9 6l6 6-6 6"></path>
        </svg>

      </button>

    </div>

    <!-- 現在位置を表すドット -->
    <div class="infinite-slider_dots">

      <button class="infinite-slider_dot is-active" type="button" aria-label="1枚目の画像を表示">
      </button>

      <button class="infinite-slider_dot" type="button" aria-label="2枚目の画像を表示">
      </button>

      <button class="infinite-slider_dot" type="button" aria-label="3枚目の画像を表示">
      </button>

    </div>

  </div>

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

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* スライダー本体 */
.infinite-slider_slider{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:760px; /* 最大横幅。値を大きくするとPCでスライダー全体が横に広がる */
  margin:0 auto; /* スライダーを左右中央へ配置 */
}

/* 画像と左右ボタンを並べるエリア */
.infinite-slider_area{
  display:flex; /* 左ボタン・画像・右ボタンを横並びにする */
  align-items:center; /* 各要素を上下中央へ揃える */
  gap:18px; /* 画像と左右ボタンの間隔。値を大きくすると間隔が広がる */
}

/* 左右の操作ボタン */
.infinite-slider_button{
  display:flex; /* SVGアイコンを中央へ配置する */
  align-items:center; /* SVGアイコンを上下中央へ配置する */
  justify-content:center; /* SVGアイコンを左右中央へ配置する */
  flex-shrink:0; /* ボタンが縮まないようにする */
  width:52px; /* ボタンの横幅。値を大きくするとボタンが大きくなる */
  height:52px; /* ボタンの高さ。値を大きくするとボタンが大きくなる */
  padding:0; /* ボタン内側の標準余白を削除 */
  border:none; /* ボタンの標準枠線を削除 */
  border-radius:50%; /* ボタンを円形にする */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* SVGアイコンの色 */
  cursor:pointer; /* マウスポインターを指マークにする */
  transition:background-color .3s ease; /* 0.3秒で背景色を切り替える。値を大きくするとゆっくり変化する */
}

/* 左右ボタンにマウスを重ねた状態 */
.infinite-slider_button:hover{
  background:#1d4ed8; /* マウスを重ねたときの背景色 */
}

/* 左右ボタンのSVGアイコン */
.infinite-slider_button svg{
  width:24px; /* SVGアイコンの横幅。値を大きくするとアイコンが大きくなる */
  height:24px; /* SVGアイコンの高さ。値を大きくするとアイコンが大きくなる */
  fill:none; /* SVG内部を塗りつぶさない */
  stroke:currentColor; /* ボタンの文字色をSVGの線色として使用 */
  stroke-width:2; /* SVGの線の太さ。値を大きくすると矢印が太くなる */
  stroke-linecap:round; /* SVG線の端を丸くする */
  stroke-linejoin:round; /* SVG線の接続部分を丸くする */
}

/* 画像の表示領域 */
.infinite-slider_view{
  flex:1; /* 左右ボタン以外の残り幅を使用する */
  min-width:0; /* flex内で画像表示領域が正しく縮小できるようにする */
  overflow:hidden; /* 表示領域の外側にある画像を非表示にする */
  border-radius:18px; /* 表示領域の角丸。値を大きくすると丸みが強くなる */
}

/* 横方向へ移動する画像一覧 */
.infinite-slider_track{
  display:flex; /* 画像を横方向へ並べる */
  width:100%; /* 表示領域の横幅に合わせる */
  transform:translateX(-100%); /* 最初の複製画像を飛ばして1枚目を初期表示する */
  transition:transform .3s ease; /* 0.3秒で画像をスライドする。値を大きくすると移動がゆっくりになる */
}

/* 1枚分のスライド */
.infinite-slider_slide{
  flex:0 0 100%; /* 1枚を表示領域と同じ横幅にする */
  width:100%; /* 1枚分の横幅を表示領域いっぱいにする */
  overflow:hidden; /* 角丸からはみ出す画像を非表示にする */
  border-radius:18px; /* 画像の角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 画像部分の背景色 */
}

/* スライド内の画像 */
.infinite-slider_slide img{
  display:block; /* 画像下部の余分な隙間をなくす */
  width:100%; /* 表示領域の横幅に合わせる */
  height:360px; /* PCでの画像高さ。値を大きくすると画像が縦に高くなる */
  object-fit:cover; /* 縦横比を保ちながら表示領域いっぱいに画像を表示 */
}

/* 現在位置を表すドット */
.infinite-slider_dots{
  display:flex; /* ドットを横並びにする */
  align-items:center; /* ドットを上下中央へ揃える */
  justify-content:center; /* ドットを左右中央へ配置する */
  gap:10px; /* ドット同士の間隔。値を大きくすると間隔が広がる */
  margin-top:24px; /* 画像とドットの間隔。値を大きくすると上下の間隔が広がる */
}

/* 各ドット */
.infinite-slider_dot{
  width:12px; /* ドットの横幅。値を大きくするとドットが大きくなる */
  height:12px; /* ドットの高さ。値を大きくするとドットが大きくなる */
  padding:0; /* ボタン標準の内側余白を削除 */
  border:none; /* ボタン標準の枠線を削除 */
  border-radius:50%; /* ドットを円形にする */
  background:#cbd5e1; /* 通常時のドット色 */
  cursor:pointer; /* マウスポインターを指マークにする */
  transition:background-color .3s ease; /* 0.3秒でドット色を切り替える。値を大きくするとゆっくり変化する */
}

/* 現在表示している画像のドット */
.infinite-slider_dot.is-active{
  background:#2563eb; /* 現在位置のドット色 */
}

/* 画面幅640px以下 */
@media(max-width:640px){

  /* ページ全体 */
  body{
    padding:24px 12px; /* 上下24px・左右12px。スマートフォンでは画面端の余白を小さくする */
  }

  /* 画像と左右ボタンを並べるエリア */
  .infinite-slider_area{
    gap:8px; /* スマートフォンでの画像とボタンの間隔。値を大きくすると間隔が広がる */
  }

  /* 左右の操作ボタン */
  .infinite-slider_button{
    width:42px; /* スマートフォンでのボタン横幅。値を大きくするとボタンが大きくなる */
    height:42px; /* スマートフォンでのボタン高さ。値を大きくするとボタンが大きくなる */
  }

  /* 左右ボタンのSVGアイコン */
  .infinite-slider_button svg{
    width:22px; /* スマートフォンでのSVG横幅。値を大きくするとアイコンが大きくなる */
    height:22px; /* スマートフォンでのSVG高さ。値を大きくするとアイコンが大きくなる */
  }

  /* スライド内の画像 */
  .infinite-slider_slide img{
    height:220px; /* スマートフォンでの画像高さ。値を大きくすると画像が縦に高くなる */
  }

}

// スライダー本体を取得
const infiniteSlider=document.querySelector(
  ".infinite-slider_slider"
);

// 横方向へ移動する画像一覧を取得
const infiniteSliderTrack=infiniteSlider.querySelector(
  ".infinite-slider_track"
);

// 複製画像を含むすべてのスライドを取得
const infiniteSliderSlides=infiniteSlider.querySelectorAll(
  ".infinite-slider_slide"
);

// 前の画像へ移動するボタンを取得
const infiniteSliderPrev=infiniteSlider.querySelector(
  ".infinite-slider_prev"
);

// 次の画像へ移動するボタンを取得
const infiniteSliderNext=infiniteSlider.querySelector(
  ".infinite-slider_next"
);

// 現在位置を表すドットを取得
const infiniteSliderDots=infiniteSlider.querySelectorAll(
  ".infinite-slider_dot"
);

// 実際に表示する画像数を取得
const infiniteSliderRealCount=
  infiniteSliderDots.length;

// 先頭の複製画像を除いた1枚目から開始
let infiniteSliderIndex=1;

// アニメーション中の連続操作を防ぐ
let infiniteSliderMoving=false;

// 画像位置と現在位置のドットを更新
function updateInfiniteSlider(){

  // 0.3秒で横方向へスライド
  infiniteSliderTrack.style.transition=
    "transform .3s ease";

  // 1枚分を100%として現在位置まで移動
  infiniteSliderTrack.style.transform=
    "translateX(-"+(infiniteSliderIndex*100)+"%)";

  // 複製画像を除いた実際の画像番号を計算
  const realIndex=
    (infiniteSliderIndex-1+infiniteSliderRealCount)%
    infiniteSliderRealCount;

  // 現在表示している画像のドットだけを有効化
  infiniteSliderDots.forEach(function(dot,index){

    dot.classList.toggle(
      "is-active",
      index===realIndex
    );

  });

}

// 次の画像へ移動
infiniteSliderNext.addEventListener("click",function(){

  // アニメーション中は操作しない
  if(infiniteSliderMoving){
    return;
  }

  infiniteSliderMoving=true;

  // 1枚分次へ進める
  infiniteSliderIndex++;

  updateInfiniteSlider();

});

// 前の画像へ移動
infiniteSliderPrev.addEventListener("click",function(){

  // アニメーション中は操作しない
  if(infiniteSliderMoving){
    return;
  }

  infiniteSliderMoving=true;

  // 1枚分前へ戻す
  infiniteSliderIndex--;

  updateInfiniteSlider();

});

// スライドアニメーション終了後のループ処理
infiniteSliderTrack.addEventListener(
  "transitionend",
  function(){

    // 末尾に複製した1枚目まで進んだ場合
    if(
      infiniteSliderIndex===
      infiniteSliderSlides.length-1
    ){

      // 本来の1枚目へ戻す
      infiniteSliderIndex=1;

      // 戻す瞬間だけアニメーションを無効化
      infiniteSliderTrack.style.transition="none";

      // 1枚目の位置へ瞬時に移動
      infiniteSliderTrack.style.transform=
        "translateX(-100%)";

    }

    // 先頭に複製した3枚目まで戻った場合
    if(infiniteSliderIndex===0){

      // 本来の最後の画像位置へ戻す
      infiniteSliderIndex=
        infiniteSliderSlides.length-2;

      // 戻す瞬間だけアニメーションを無効化
      infiniteSliderTrack.style.transition="none";

      // 最後の画像位置へ瞬時に移動
      infiniteSliderTrack.style.transform=
        "translateX(-"+
        (infiniteSliderIndex*100)+
        "%)";

    }

    // 次の操作を受け付ける
    infiniteSliderMoving=false;

  }
);

// ドットをクリックしたときの処理
infiniteSliderDots.forEach(function(dot,index){

  dot.addEventListener("click",function(){

    // アニメーション中は操作しない
    if(infiniteSliderMoving){
      return;
    }

    infiniteSliderMoving=true;

    // クリックしたドットに対応する画像位置を設定
    infiniteSliderIndex=index+1;

    updateInfiniteSlider();

  });

});

// 初期表示を設定
updateInfiniteSlider();

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

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは画像、左右の操作ボタン、SVGアイコン、現在位置を表すドットを配置し、CSSではスライダーの横幅、画像サイズ、角丸、操作ボタン、ドット、スライドアニメーションを設定します。JavaScriptでは現在の画像位置を管理し、先頭と末尾に配置した複製画像を利用して、左右どちらの方向にも途切れず繰り返し移動できる無限ループを実装します。表示する3枚の画像とimagesフォルダはZIPには含まれていないため、利用者自身で用意して配置してください。

sample/
├── index.html
├── style.css
├── script.js
└── images/
    ├── image1.png
    ├── image2.png
    └── image3.png

各ファイルの役割
index.htmlは無限ループする画像スライダーのHTMLを構成するファイルです。3枚の画像、左右の操作ボタン、ボタン内のSVGアイコン、現在位置を表す3つのドットを配置しています。無限ループを実現するため、3枚目の画像を先頭へ、1枚目の画像を末尾へ複製して配置しています。

style.cssはスライダーのデザインを設定するファイルです。スライダー全体の最大横幅、画像の高さ、角丸、画像と左右ボタンの間隔、ボタンの大きさや色、SVGアイコンの大きさ、ドットの大きさや間隔、横方向へ移動するアニメーションなどを設定しています。

script.jsはスライダーの動作を制御するファイルです。現在の画像位置を管理し、左右のボタンによる前後移動、ドットによる画像の直接選択、スライド終了後の位置補正を行います。末尾に複製した1枚目または先頭に複製した3枚目まで移動すると、アニメーションを一時的に無効化して対応する本来の画像位置へ瞬時に移動することで、無限ループとして表示します。

imagesフォルダはスライダーで表示する画像を配置するフォルダです。image1.png、image2.png、image3.pngの3枚を使用します。imagesフォルダと画像ファイルはZIPには含まれていないため、利用者自身で用意してください。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。次にsampleフォルダ内へimagesフォルダを作成し、利用者自身で用意した3枚のPNG画像をimage1.png、image2.png、image3.pngというファイル名で配置してください。index.htmlからstyle.cssとscript.jsを読み込み、画像はimages/image1.pngからimages/image3.pngを参照する構成です。配置後にsample/index.htmlをブラウザで開くとスライダーを確認できます。左右のボタンでは前後の画像へ繰り返し移動でき、下のドットをクリックすると対応する画像へ直接切り替えられます。

カスタマイズできる内容
index.htmlでは表示する画像とalt属性を変更できます。別のファイル名や画像形式を使用する場合は、srcのimages/image1.pngなどを実際の画像ファイル名に合わせて変更してください。無限ループでは先頭と末尾に複製画像を配置しているため、画像を変更する場合は通常の3枚だけでなく、先頭の3枚目と末尾の1枚目の複製画像も同じ内容になるように変更します。左右ボタンのSVGはpathの内容を変更すると別の矢印形状へ変更できます。style.cssではスライダーの最大横幅、画像の高さ、角丸、ボタンのサイズや色、SVGアイコンのサイズ、ドットのサイズや色、各要素の間隔、スライド速度を変更できます。

数値調整
style.css
padding:40px 20px;
ページ全体の余白です。上下の40pxを大きくすると上下の余白が広がり、左右の20pxを大きくすると画面端との間隔が広がります。

max-width:760px;
スライダー全体の最大横幅です。値を大きくするとPCで横に広く表示され、小さくするとコンパクトになります。

gap:18px;
画像と左右の操作ボタンの間隔です。値を大きくするとボタンが画像から離れ、小さくすると近くなります。

width:52px;・height:52px;
左右の操作ボタンの大きさです。値を大きくするとボタンが大きくなり、小さくするとコンパクトになります。

transition:background-color .3s ease;
左右ボタンの背景色が切り替わる時間です。.3sを大きくするとゆっくり変化し、小さくすると速く変化します。

width:24px;・height:24px;
左右ボタン内のSVGアイコンの大きさです。値を大きくすると矢印が大きくなります。

stroke-width:2;
SVG矢印の線の太さです。値を大きくすると矢印が太くなり、小さくすると細くなります。

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

transform:translateX(-100%);
初期表示位置です。先頭に配置した複製画像を飛ばし、本来の1枚目を表示するために1枚分移動しています。無限ループの位置管理に使用する値のため、画像構成を変更せずにこの100%だけを変更すると表示位置がずれるため注意してください。

transition:transform .3s ease;
画像が横方向へスライドする時間です。.3sを大きくするとゆっくり移動し、小さくすると速く移動します。

flex:0 0 100%;
1枚の画像が使用する横幅です。100%で画像表示領域と同じ横幅になり、常に1枚ずつ表示します。

height:360px;
PCで表示する画像の高さです。値を大きくすると画像が縦に高くなり、小さくすると低くなります。

gap:10px;
ドット同士の間隔です。値を大きくするとドット同士が離れ、小さくすると近くなります。

margin-top:24px;
スライダーとドットの間隔です。値を大きくすると上下の間隔が広がり、小さくすると狭くなります。

width:12px;・height:12px;
ドットの大きさです。値を大きくするとドットが大きくなり、小さくすると小さくなります。

transition:background-color .3s ease;
ドットの色が切り替わる時間です。.3sを大きくするとゆっくり変化し、小さくすると速く変化します。

@media(max-width:640px)
スマートフォン向けの表示へ切り替える画面幅です。640px以下になると、ページ余白、画像とボタンの間隔、ボタン、SVGアイコン、画像の高さを小さくします。

padding:24px 12px;
640px以下でのページ余白です。上下24px・左右12pxへ変更して、狭い画面でも表示領域を確保します。

gap:8px;
640px以下での画像と左右ボタンの間隔です。PCより間隔を狭くして横幅を確保します。

width:42px;・height:42px;
640px以下での左右ボタンの大きさです。PCより小さく表示します。

width:22px;・height:22px;
640px以下でのSVGアイコンの大きさです。ボタンサイズに合わせて小さく表示します。

height:220px;
640px以下での画像の高さです。値を大きくすると画像が縦に高くなり、小さくすると低くなります。

script.js
let infiniteSliderIndex=1;
初期表示位置です。先頭に無限ループ用の複製画像があるため、1を指定して本来の1枚目から開始します。

infiniteSliderIndex++;・infiniteSliderIndex--;
左右ボタンをクリックしたときに現在位置を1つずつ変更します。次へ進む場合は1増やし、前へ戻る場合は1減らします。

infiniteSliderIndex*100
1枚を100%として、現在の画像番号に応じた横方向の移動量を計算します。スライド1枚の横幅を100%としているため、この値と組み合わせて1枚ずつ移動します。

infiniteSliderSlides.length-1
末尾に配置した複製画像の位置を判定するために使用します。末尾の複製画像へ到達すると、本来の1枚目へアニメーションなしで戻します。

infiniteSliderSlides.length-2
先頭の複製画像まで戻ったとき、本来の最後の画像位置を求めるために使用します。

index+1
ドットの番号と、先頭に複製画像を1枚追加したスライド側の番号を合わせるための値です。クリックしたドットに1を加えて対応する本来の画像位置へ移動します。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:760pxによって、PCでは最大横幅を制限しながら、狭い画面では利用できる横幅に合わせてスライダーが縮小します。画像表示領域はflexレイアウトの残り幅を使用し、各画像はwidth:100%で表示されます。画面幅640px以下では、ページ余白を24px 12px、画像と左右ボタンの間隔を8px、操作ボタンを42px、SVGアイコンを22px、画像の高さを220pxへ変更しているため、スマートフォン・タブレット・PCで利用できます。