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

自動再生する画像スライダーを作る方法

画像を一定時間ごとに自動で切り替える画像スライダーを作る方法を紹介します。このサンプルでは、1枚の画像を表示し、3秒ごとに次の画像へ自動でスライドします。最後の画像まで進むと1枚目へ戻るループ式になっているため、ユーザーが操作しなくても複数の画像を繰り返し表示できます。

自動再生だけでなく、画像の左右に配置した操作ボタンをクリックして前後の画像へ移動することもできます。画像の下には現在表示している位置を示すドットを配置し、ドットをクリックすると対応する画像へ直接切り替えられます。手動で画像を切り替えた場合は自動再生の待ち時間をリセットするため、操作直後にすぐ次の画像へ進んでしまうことを防げます。

HTMLでは画像、左右の操作ボタン、SVGアイコン、ドットを配置し、CSSでは画像の大きさや角丸、スライドアニメーション、ボタンやドットのデザインを設定します。JavaScriptでは現在表示している画像番号を管理し、3秒間隔の自動再生、前後へのループ移動、ドットによる画像切り替えを行います。メインビジュアルや写真ギャラリー、商品画像など、複数の画像を自動で順番に見せたい場面に利用できます。

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

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

デモ

自動再生する画像スライダー

画像が一定時間ごとに自動で切り替わります。左右のボタンまたはドットから手動でも切り替えられます。

画像は3秒ごとに自動で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>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <!-- 自動再生する画像スライダー -->
  <div class="auto-image-slider_slider">

    <!-- スライダー全体 -->
    <div class="auto-image-slider_area">

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

        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M15 18l-6-6 6-6"></path>
        </svg>

      </button>

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

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

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

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

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

        </div>

      </div>

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

        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M9 6l6 6-6 6"></path>
        </svg>

      </button>

    </div>

    <!-- 画像位置を表すドット -->
    <div class="auto-image-slider_dots">

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

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

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

    </div>

  </div>

  <script src="script.js"></script>

</body>

</html>

/* ページ全体 */
body{
  margin:0;
  padding:40px 20px; /* 上下40px、左右20pxの余白。数値を大きくするとページ端との間隔が広がる */
  background:#ffffff;
  color:#111827;
  font-family:sans-serif;
}

/* スライダー本体 */
.auto-image-slider_slider{
  width:100%;
  max-width:760px; /* スライダー全体の最大幅。大きくするとPCで横幅が広くなる */
  margin:0 auto;
}

/* 画像と左右ボタンを並べるエリア */
.auto-image-slider_area{
  display:flex;
  align-items:center;
  gap:18px; /* 画像と左右ボタンの間隔。大きくすると間隔が広がる */
}

/* 左右の操作ボタン */
.auto-image-slider_button{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:52px; /* ボタンの横幅。大きくするとボタンが大きくなる */
  height:52px; /* ボタンの高さ。大きくするとボタンが大きくなる */
  padding:0;
  border:none;
  border-radius:50%;
  background:#2563eb;
  color:#ffffff;
  cursor:pointer;
  transition:background-color .3s ease; /* ボタン色が変化する時間。大きくすると変化がゆっくりになる */
}

/* 左右ボタンにマウスを重ねた状態 */
.auto-image-slider_button:hover{
  background:#1d4ed8;
}

/* 左右ボタンのSVGアイコン */
.auto-image-slider_button svg{
  width:24px; /* SVGアイコンの横幅。大きくするとアイコンが大きくなる */
  height:24px; /* SVGアイコンの高さ。大きくするとアイコンが大きくなる */
  fill:none;
  stroke:currentColor;
  stroke-width:2; /* SVG線の太さ。大きくすると矢印が太くなる */
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* 画像の表示領域 */
.auto-image-slider_view{
  flex:1;
  min-width:0;
  overflow:hidden;
  border-radius:18px; /* 画像表示領域の角丸。大きくすると角がより丸くなる */
}

/* 横方向へ移動する画像一覧 */
.auto-image-slider_track{
  display:flex;
  width:100%;
  transition:transform .3s ease; /* 画像がスライドする時間。大きくすると移動がゆっくりになる */
}

/* 1枚分のスライド */
.auto-image-slider_slide{
  flex:0 0 100%; /* 1枚の画像を表示領域いっぱいの幅にする */
  width:100%;
  overflow:hidden;
  border-radius:18px; /* 各画像の角丸。大きくすると角がより丸くなる */
  background:#ffffff;
}

/* スライド内の画像 */
.auto-image-slider_slide img{
  display:block;
  width:100%;
  height:360px; /* PCでの画像の高さ。大きくすると画像が縦に高くなる */
  object-fit:cover;
}

/* 画像位置を表すドット */
.auto-image-slider_dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px; /* ドット同士の間隔。大きくするとドットの間が広がる */
  margin-top:24px; /* 画像とドットの間隔。大きくすると上下の間隔が広がる */
}

/* 各ドット */
.auto-image-slider_dot{
  width:12px; /* ドットの横幅。大きくするとドットが大きくなる */
  height:12px; /* ドットの高さ。大きくするとドットが大きくなる */
  padding:0;
  border:none;
  border-radius:50%;
  background:#cbd5e1;
  cursor:pointer;
  transition:background-color .3s ease; /* ドット色が変化する時間。大きくすると変化がゆっくりになる */
}

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

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

  /* スマートフォンでのページ余白 */
  body{
    padding:24px 12px; /* 上下24px、左右12px。大きくすると画面端との余白が広がる */
  }

  /* スマートフォンでの画像とボタンの間隔 */
  .auto-image-slider_area{
    gap:8px; /* 数値を大きくすると画像とボタンの間隔が広がる */
  }

  /* スマートフォンでの左右ボタン */
  .auto-image-slider_button{
    width:42px; /* スマートフォンでのボタン横幅 */
    height:42px; /* スマートフォンでのボタン高さ */
  }

  /* スマートフォンでのSVGアイコン */
  .auto-image-slider_button svg{
    width:22px; /* スマートフォンでのSVGアイコン横幅 */
    height:22px; /* スマートフォンでのSVGアイコン高さ */
  }

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

}

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

// 横方向へ移動する画像一覧を取得
const autoImageSliderTrack=autoImageSlider.querySelector(
  ".auto-image-slider_track"
);

// すべての画像を取得
const autoImageSliderSlides=autoImageSlider.querySelectorAll(
  ".auto-image-slider_slide"
);

// 前へ移動するボタンを取得
const autoImageSliderPrev=autoImageSlider.querySelector(
  ".auto-image-slider_prev"
);

// 次へ移動するボタンを取得
const autoImageSliderNext=autoImageSlider.querySelector(
  ".auto-image-slider_next"
);

// すべてのドットを取得
const autoImageSliderDots=autoImageSlider.querySelectorAll(
  ".auto-image-slider_dot"
);

// 最初に表示する画像番号。0は1枚目
let autoImageSliderIndex=0;

// 自動再生タイマーを保存する変数
let autoImageSliderTimer=null;

// 画像とドットの表示を更新
function updateAutoImageSlider(){

  // 画像1枚分を100%として現在の画像位置まで横方向へ移動
  autoImageSliderTrack.style.transform=
    "translateX(-"+(autoImageSliderIndex*100)+"%)";

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

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

  });

}

// 自動再生を開始
function startAutoImageSlider(){

  // 既存のタイマーを停止して重複実行を防ぐ
  clearInterval(autoImageSliderTimer);

  // 3000ミリ秒（3秒）ごとに次の画像へ移動
  // 数値を大きくすると画像を表示する時間が長くなる
  autoImageSliderTimer=setInterval(function(){

    // 次の画像番号へ進む
    autoImageSliderIndex++;

    // 最後の画像を超えた場合は1枚目へ戻る
    if(
      autoImageSliderIndex>=
      autoImageSliderSlides.length
    ){

      autoImageSliderIndex=0;

    }

    // 画像とドットを更新
    updateAutoImageSlider();

  },3000);

}

// 前ボタンをクリックしたとき
autoImageSliderPrev.addEventListener("click",function(){

  // 1つ前の画像番号へ移動
  autoImageSliderIndex--;

  // 1枚目より前へ移動した場合は最後の画像へ移動
  if(autoImageSliderIndex<0){

    autoImageSliderIndex=
      autoImageSliderSlides.length-1;

  }

  // 表示を更新
  updateAutoImageSlider();

  // 手動操作後に自動再生の待ち時間をリセット
  startAutoImageSlider();

});

// 次ボタンをクリックしたとき
autoImageSliderNext.addEventListener("click",function(){

  // 次の画像番号へ移動
  autoImageSliderIndex++;

  // 最後の画像を超えた場合は1枚目へ戻る
  if(
    autoImageSliderIndex>=
    autoImageSliderSlides.length
  ){

    autoImageSliderIndex=0;

  }

  // 表示を更新
  updateAutoImageSlider();

  // 手動操作後に自動再生の待ち時間をリセット
  startAutoImageSlider();

});

// 各ドットをクリックしたとき
autoImageSliderDots.forEach(function(dot,index){

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

    // クリックしたドットに対応する画像番号へ変更
    autoImageSliderIndex=index;

    // 表示を更新
    updateAutoImageSlider();

    // 手動操作後に自動再生の待ち時間をリセット
    startAutoImageSlider();

  });

});

// 初期状態を表示
updateAutoImageSlider();

// ページ表示時から自動再生を開始
startAutoImageSlider();

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

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

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

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

ファイル構成と設置方法

このサンプルは、HTML・CSS・JavaScriptの3ファイルと、スライダーで使用する3枚の画像を組み合わせて使用します。ダウンロードできるZIPにはHTML・CSS・JavaScriptが含まれます。画像ファイルは含まれていないため、使用する画像を用意してimagesフォルダへ配置してください。

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

index.htmlには、3枚の画像、左右の操作ボタン、SVGの矢印アイコン、現在位置を表す3つのドットを配置しています。style.cssでは、画像の大きさや角丸、横方向のスライドアニメーション、左右ボタン、SVGアイコン、ドットなどのデザインを設定しています。script.jsでは、現在表示している画像番号を管理し、3秒ごとの自動再生、左右ボタンによる前後への移動、ドットによる直接切り替え、最後の画像と1枚目をつなぐループ処理を行います。imagesフォルダには、スライダーで表示する画像を配置します。image1.png・image2.png・image3.pngは利用者側で用意する画像で、ZIPには含まれていません。

設置方法・使い方
sampleフォルダ内にindex.html・style.css・script.jsを配置し、同じ階層にimagesフォルダを作成します。imagesフォルダには、使用する3枚の画像をimage1.png・image2.png・image3.pngという名前で配置してください。画像のファイル名や拡張子を変更する場合は、index.html内のimg要素のsrc属性も実際のファイルに合わせて変更します。ファイルを配置したあとindex.htmlをブラウザで開くと、1枚目の画像から表示され、3秒ごとに自動で次の画像へ切り替わります。

カスタマイズできる内容
表示する画像はindex.html内のimg要素から変更できます。画像を追加する場合は、auto-image-slider_slideを追加し、それに対応するauto-image-slider_dotも追加してください。alt属性には、それぞれの画像内容に合った説明を設定します。左右ボタンの矢印はSVGのpath要素で作成しているため、別のSVGアイコンへ変更することもできます。ボタンやドットの色、画像の角丸、画像の高さ、スライド速度、自動再生の間隔などはCSSとJavaScriptから調整できます。

数値調整
ページ全体はbodyのpaddingを40px 20pxに設定しています。auto-image-slider_sliderのmax-widthは760pxで、PC表示時のスライダー全体の最大幅を指定しています。auto-image-slider_areaのgapは18pxで、画像と左右ボタンの間隔です。左右ボタンは52px四方、SVGアイコンは24px四方、stroke-widthは2です。画像表示部分と各画像のborder-radiusは18px、スライドアニメーションは0.3秒、PCでの画像高さは360pxです。ドットは12px四方、ドット間のgapは10px、画像からドットまでのmargin-topは24pxです。

JavaScriptのsetIntervalに指定している3000は、自動で次の画像へ切り替えるまでの時間をミリ秒で指定しています。3000は3秒、5000に変更すると5秒ごとの自動再生になります。画像の移動量は1枚につき100%で、現在の画像番号に100を掛けた値だけ横方向へ移動します。最初の画像番号は0で、最後の画像を超えると0へ戻り、1枚目より前へ移動すると画像数から1を引いた最後の画像番号へ移動します。左右ボタンやドットを操作した場合はタイマーを一度リセットし、設定した待ち時間から自動再生を再開します。

レスポンシブ対応
スライダー本体はwidth:100%とmax-width:760pxを組み合わせているため、画面が狭くなると利用できる横幅に合わせて縮小します。画面幅640px以下では、ページ余白を24px 12px、画像とボタンの間隔を8px、左右ボタンを42px四方、SVGアイコンを22px四方、画像の高さを220pxへ変更します。これにより、スマートフォン・タブレット・PCで画像と操作ボタンを画面幅に合わせて表示できます。