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

画像をスライドするスライダーを作る方法

画像を横方向へスライドして切り替えるスライダーを作る方法を紹介します。このサンプルでは、1枚の大きな画像を表示し、画像の下に配置した左右の操作ボタンをクリックすると前後の画像へスライドします。最後の画像から次へ進むと1枚目へ戻り、1枚目から前へ戻ると最後の画像へ移動するループ式のため、途中で操作を止めることなく繰り返し画像を切り替えられます。

Webサイトのメインビジュアル、写真ギャラリー、商品画像、作品紹介など、限られた表示領域で複数の画像を1枚ずつ見せたい場面に利用できます。画像の下には前へ戻るボタン、現在位置を表すドット、次へ進むボタンを横一列に配置します。左右のボタンにはSVGアイコンを使用し、ドットをクリックすると対応する画像へ直接切り替えられるため、前後への移動と画像の直接選択をどちらも行えます。

HTMLでは画像、左右の操作ボタン、SVGアイコン、ドットを配置し、CSSでは画像の大きさや角丸、スライドアニメーション、操作部分の配置、ボタンやドットのデザインを設定します。JavaScriptでは現在表示している画像番号を管理し、左右のボタンによるループ処理とドットによる画像切り替えを行います。画面幅640px以下では画像や操作部分が画面幅に合わせて表示されるため、スマートフォン・タブレット・PCで利用できる画像スライダーとして活用できます。

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

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

デモ

画像をスライドするスライダー

画像の下にある左右のボタンまたはドットをクリックして、画像を切り替えてください。

画像の下にある左右のSVGアイコンをクリックすると、画像が1枚ずつ横方向へスライドします。最後の画像から次へ進むと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="image-slide-slider_slider">

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

      <!-- 横方向へ移動する画像トラック -->
      <div class="image-slide-slider_track">

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

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

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

      </div>

    </div>

    <!-- 操作部分 -->
    <div class="image-slide-slider_controls">

      <!-- 前の画像へ移動するボタン -->
      <button class="image-slide-slider_button image-slide-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="image-slide-slider_dots">

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

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

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

      </div>

      <!-- 次の画像へ移動するボタン -->
      <button class="image-slide-slider_button image-slide-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>

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

</body>
</html>

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

/* スライダー本体 */
.image-slide-slider_slider{
  width:100%; /* 設置した場所の横幅いっぱいに表示 */
  max-width:696px; /* 最大横幅。値を大きくするとスライダー全体が横に広がる */
  margin:0 auto; /* 左右中央へ配置 */
}

/* 画像表示エリア */
.image-slide-slider_view{
  width:100%; /* スライダーの横幅いっぱいに表示 */
  overflow:hidden; /* 表示範囲外の画像を隠す */
  border-radius:18px; /* 画像の角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 画像表示エリアの背景色 */
}

/* 画像を横並びにするトラック */
.image-slide-slider_track{
  display:flex; /* 画像を横方向へ並べる */
  width:100%; /* 表示エリアの横幅に合わせる */
  transition:transform .3s ease; /* 0.3秒で画像をスライド。値を大きくすると遅く、小さくすると速くなる */
}

/* 各画像 */
.image-slide-slider_slide{
  flex:0 0 100%; /* 画像1枚を表示エリアと同じ横幅にする */
  width:100%; /* 画像項目の横幅 */
}

/* 画像本体 */
.image-slide-slider_slide img{
  display:block; /* 画像下部の不要な隙間をなくす */
  width:100%; /* 表示エリアの横幅いっぱいに表示 */
  height:360px; /* 画像の高さ。値を大きくすると画像が高くなる */
  object-fit:cover; /* 縦横比を保ちながら表示領域を埋める */
}

/* 操作部分 */
.image-slide-slider_controls{
  display:flex; /* 前ボタン・ドット・次ボタンを横並びにする */
  align-items:center; /* 上下中央へ揃える */
  justify-content:center; /* 横方向の中央へ配置 */
  gap:18px; /* ボタンとドットの間隔。値を大きくすると間隔が広がる */
  margin-top:20px; /* 画像と操作部分の間隔。値を大きくすると下へ離れる */
}

/* 左右の操作ボタン */
.image-slide-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秒で背景色を切り替える */
}

/* 操作ボタンへマウスを重ねたとき */
.image-slide-slider_button:hover{
  background:#1d4ed8; /* ホバー時の背景色 */
}

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

/* ドット全体 */
.image-slide-slider_dots{
  display:flex; /* ドットを横並びにする */
  align-items:center; /* 上下中央へ揃える */
  justify-content:center; /* 横方向の中央へ配置 */
  gap:10px; /* ドット同士の間隔。値を大きくすると間隔が広がる */
}

/* 各ドット */
.image-slide-slider_dot{
  width:12px; /* ドットの横幅。値を大きくするとドットが大きくなる */
  height:12px; /* ドットの高さ。値を大きくするとドットが大きくなる */
  padding:0; /* ドット内の追加余白をなくす */
  border:none; /* 枠線を非表示 */
  border-radius:50%; /* ドットを円形にする */
  background:#cbd5e1; /* 通常時のドット色 */
  cursor:pointer; /* マウスポインターをクリック可能な表示にする */
  transition:background-color .3s ease; /* 0.3秒でドット色を切り替える */
}

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

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

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

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

  /* 操作部分 */
  .image-slide-slider_controls{
    gap:14px; /* ボタンとドットの間隔を14pxへ変更 */
    margin-top:18px; /* 画像と操作部分の間隔を18pxへ変更 */
  }

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

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

  /* 各ドット */
  .image-slide-slider_dot{
    width:10px; /* スマートフォンでのドット横幅 */
    height:10px; /* スマートフォンでのドット高さ */
  }

}

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

/* 画像トラックを取得 */
const imageSlideSliderTrack=imageSlideSlider.querySelector(
  ".image-slide-slider_track"
);

/* すべての画像を取得 */
const imageSlideSliderSlides=imageSlideSlider.querySelectorAll(
  ".image-slide-slider_slide"
);

/* 前へ移動するボタンを取得 */
const imageSlideSliderPrev=imageSlideSlider.querySelector(
  ".image-slide-slider_prev"
);

/* 次へ移動するボタンを取得 */
const imageSlideSliderNext=imageSlideSlider.querySelector(
  ".image-slide-slider_next"
);

/* すべてのドットを取得 */
const imageSlideSliderDots=imageSlideSlider.querySelectorAll(
  ".image-slide-slider_dot"
);

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

/* 画像とドットの表示状態を更新 */
function updateImageSlideSlider(){

  /*
    100は画像1枚分の横幅。
    現在の画像番号に100%を掛けて横方向へ移動する。
  */
  imageSlideSliderTrack.style.transform=
    "translateX(-"+(imageSlideSliderIndex*100)+"%)";

  /* 現在表示している画像に対応するドットを選択状態にする */
  imageSlideSliderDots.forEach(function(dot,index){

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

  });

}

/* 前の画像を表示 */
imageSlideSliderPrev.addEventListener("click",function(){

  /* 1を引いて1枚前へ移動 */
  imageSlideSliderIndex--;

  /* 1枚目より前へ進んだ場合は最後の画像へ移動 */
  if(imageSlideSliderIndex<0){

    imageSlideSliderIndex=
      imageSlideSliderSlides.length-1;

  }

  /* 表示を更新 */
  updateImageSlideSlider();

});

/* 次の画像を表示 */
imageSlideSliderNext.addEventListener("click",function(){

  /* 1を足して1枚次へ移動 */
  imageSlideSliderIndex++;

  /* 最後の画像より先へ進んだ場合は1枚目へ戻る */
  if(
    imageSlideSliderIndex>=
    imageSlideSliderSlides.length
  ){

    imageSlideSliderIndex=0;

  }

  /* 表示を更新 */
  updateImageSlideSlider();

});

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

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

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

    /* 表示を更新 */
    updateImageSlideSlider();

  });

});

/* 初期表示 */
updateImageSlideSlider();

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

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

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

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは3枚の画像と、画像の下に前へ戻るボタン・3つのドット・次へ進むボタンを配置します。左右のボタンにはSVGアイコンを直接記述しているため、矢印用の画像ファイルや外部アイコンライブラリは必要ありません。CSSでは画像の表示サイズや角丸、操作部分の配置、ボタン、SVGアイコン、ドット、スライドアニメーションを設定し、JavaScriptでは画像の切り替えと前後のループ動作を行います。スライダーで使用する3枚のPNG画像はZIPへ含まれていないため、利用者自身で用意してimagesフォルダへ配置してください。

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

各ファイルの役割
index.htmlはスライダー本体を構成するファイルです。3枚の画像、前後へ移動する操作ボタン、SVGで作成した左右の矢印アイコン、表示する画像を直接選択する3つのドットを記述しています。画像にはimages/image1.png、images/image2.png、images/image3.pngを指定しています。

style.cssはスライダーのレイアウトとデザインを設定するファイルです。画像の表示サイズや角丸、横方向へ移動するときのアニメーション、画像の下に配置する操作部分、左右の青いボタン、SVGアイコン、ドットの大きさや色を変更できます。

script.jsはスライダーの動作を設定するファイルです。現在表示している画像番号を管理し、前後のボタンをクリックすると画像を1枚ずつ切り替えます。最後の画像から次へ進むと1枚目へ戻り、1枚目から前へ戻ると最後の画像へ移動します。ドットをクリックすると、対応する画像を直接表示します。

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

設置方法・使い方
sampleフォルダへindex.html・style.css・script.jsを配置し、同じsampleフォルダ内へimagesフォルダを作成します。使用する3枚のPNG画像を用意して、image1.png、image2.png、image3.pngというファイル名でsample/images/へ配置してください。別のファイル名や画像形式を使用する場合は、index.htmlの各img要素にあるsrcも実際のファイル名とパスに合わせて変更します。

必要なファイルと画像を配置したあと、sample/index.htmlをブラウザで開いてください。画像の下にある左側のSVGボタンをクリックすると前の画像、右側のSVGボタンをクリックすると次の画像へスライドします。最後の画像から次へ進むと1枚目へ戻り、1枚目から前へ戻ると最後の画像へ移動します。中央のドットをクリックすると、対応する画像へ直接切り替えられます。

カスタマイズできる内容
index.htmlでは表示する画像と代替テキストを変更できます。各img要素のsrcを画像の配置先に合わせて変更し、altも画像の内容に合わせて書き換えてください。画像を追加する場合はimage-slide-slider_slideを追加し、対応するimage-slide-slider_dotも同じ数になるよう追加します。左右の操作ボタン内にあるSVGのpathを変更すると、矢印アイコンの形も変更できます。

style.cssではスライダーの最大横幅、画像の高さや角丸、スライド速度、画像と操作部分の間隔、左右ボタンの大きさや色、SVGアイコンの大きさや線幅、ドットの大きさや色などを変更できます。

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

max-width:696px;
スライダー本体の最大横幅です。値を大きくすると画像を含むスライダー全体が横に広がり、小さくするとコンパクトになります。

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

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

flex:0 0 100%;
画像1枚の横幅です。100%にすることで、表示エリアへ画像を1枚ずつ表示します。

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

gap:18px;
前ボタン・ドット・次ボタンの間隔です。値を大きくすると操作要素同士の間隔が広がり、小さくすると狭くなります。

margin-top:20px;
画像と操作部分の間隔です。値を大きくすると操作部分が画像から下へ離れ、小さくすると近くなります。

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

transition:background-color .3s ease;
操作ボタンやドットの色が切り替わる時間です。.3sは0.3秒を表し、値を大きくするとゆっくり、小さくすると速く変化します。

width:24px;・height:24px;
操作ボタン内に表示するSVGアイコンの大きさです。値を大きくすると矢印が大きくなり、小さくすると小さくなります。

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

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

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

@media(max-width:640px)
スマートフォン向けの表示へ切り替える画面幅です。640px以下になると画像や操作部分のサイズを変更します。

height:220px;
画面幅640px以下での画像の高さです。値を大きくするとスマートフォンでも画像が高く表示されます。

gap:14px;
画面幅640px以下での前ボタン・ドット・次ボタンの間隔です。

margin-top:18px;
画面幅640px以下での画像と操作部分の間隔です。

width:44px;・height:44px;
画面幅640px以下での左右の操作ボタンの大きさです。

width:22px;・height:22px;
画面幅640px以下でのSVGアイコンの大きさです。

width:10px;・height:10px;
画面幅640px以下でのドットの大きさです。

script.js
let imageSlideSliderIndex=0;
最初に表示する画像番号です。0は1枚目を表します。1へ変更すると2枚目、2へ変更すると3枚目から表示できます。

imageSlideSliderIndex*100
画像の横方向への移動量を求める計算です。100は画像1枚分の横幅を表し、現在の画像番号に100%を掛けて表示位置を決めます。

imageSlideSliderIndex--・imageSlideSliderIndex++
左右のボタンを1回クリックしたときに画像番号を1つ戻す、または1つ進める処理です。現在は1回の操作で画像1枚分切り替わります。

imageSlideSliderSlides.length-1
1枚目から前へ戻ったときに最後の画像番号を求める処理です。画像の総数から1を引くことで最後の画像へ移動します。

imageSlideSliderIndex=0;
最後の画像から次へ進んだときに1枚目へ戻す値です。これにより前後の操作を繰り返せるループ式になります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssではスライダー本体へwidth:100%とmax-width:696pxを設定し、画像にもwidth:100%を指定しているため、設置する場所や画面幅に合わせて横幅が縮小されます。

画面幅640px以下では@media(max-width:640px)を使用し、ページの余白を24px 12px、画像の高さを220px、操作ボタンを44px、SVGアイコンを22px、ドットを10pxへ変更します。画像の下に前ボタン・ドット・次ボタンを並べる基本構成は維持したまま、スマートフォン・タブレット・PCで利用できます。