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

画像・画像比率・角丸・矢印ボタン・ドット・色などを設定して、HTML・CSS・JavaScriptを自動生成できます。

基本のスライダーを作る方法

Webサイトでは、複数の画像を限られた表示領域の中で順番に見せたい場合があります。この記事では、HTML・CSS・JavaScriptを使って、1枚の画像を大きく表示し、左右のボタンやドットを操作すると次の画像へ切り替わる基本的なスライダーを作ります。

スライダーには3枚の画像を設定し、表示領域には常に1枚だけを表示します。左右のボタンをクリックすると画像が1枚ずつ横方向へ切り替わり、下に配置したドットから表示したい画像へ直接移動することもできます。最初の画像では前へボタン、最後の画像では次へボタンが操作できない状態になります。

特別なライブラリは使用せず、HTMLで画像や操作ボタンを配置し、CSSで1枚分の表示領域と切り替えアニメーションを設定します。JavaScriptでは現在表示している画像の番号を管理して表示位置を変更します。画像ギャラリーや商品画像、バナーなど、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="basic-slider_area">

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

      <!-- 3枚の画像を横並びにする要素 -->
      <div class="basic-slider_track">

        <!--
          画像はZIPに含まれていません。
          sampleフォルダ内にimagesフォルダを作成し、
          image1.png～image3.pngを配置してください。
        -->

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

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

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

      </div>

    </div>

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

    <!-- 1枚目を表示するドット -->
    <button
      class="basic-slider_dot is-active"
      type="button"
      aria-label="1枚目の画像を表示">
    </button>

    <!-- 2枚目を表示するドット -->
    <button
      class="basic-slider_dot"
      type="button"
      aria-label="2枚目の画像を表示">
    </button>

    <!-- 3枚目を表示するドット -->
    <button
      class="basic-slider_dot"
      type="button"
      aria-label="3枚目の画像を表示">
    </button>

  </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; /* ページ全体で使用するフォント */
}

/* スライダー操作エリアと子要素 */
.basic-slider_area,
.basic-slider_area *,
.basic-slider_dots,
.basic-slider_dots *{
  box-sizing:border-box; /* paddingとborderを要素サイズへ含める */
}

/* スライダー操作エリア */
.basic-slider_area{
  display:flex; /* 前へボタン・画像・次へボタンを横並びにする */
  align-items:center; /* 縦方向を中央揃えにする */
  width:100%; /* 使用する場所の横幅に合わせる */
  gap:18px; /* ボタンと画像の間隔。値を大きくすると間隔が広がる */
}

/* 前へボタンと次へボタン */
.basic-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,
    opacity .3s ease;
  /*
    0.3秒で背景色と透明度を切り替える。
    値を大きくするとゆっくり、小さくすると速くなる。
  */
}

/* 操作できないボタン */
.basic-slider_button:disabled{
  background:#cbd5e1; /* 無効時の背景色 */
  opacity:.7; /* 無効時の透明度。値を小さくすると薄くなる */
  cursor:default; /* 通常のマウスカーソルを表示 */
}

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

/* 画像表示エリア */
.basic-slider_view{
  flex:1; /* 左右ボタンを除いた横幅いっぱいに表示 */
  min-width:0; /* 横幅が狭い場合でも正しく縮小できるようにする */
  overflow:hidden; /* 表示中以外の画像を隠す */
  border-radius:18px; /* 表示エリアの角丸。値を大きくすると丸みが強くなる */
}

/* 画像を横並びにする要素 */
.basic-slider_track{
  display:flex; /* 3枚の画像を横並びにする */
  width:100%; /* 表示エリアの横幅に合わせる */
  transition:transform .3s ease;
  /*
    0.3秒で画像を横へ切り替える。
    値を大きくするとゆっくり、小さくすると速くなる。
  */
}

/* 各スライド */
.basic-slider_slide{
  flex:0 0 100%; /* 1枚を表示エリアと同じ横幅にする */
  width:100%; /* スライドを表示エリアの横幅いっぱいにする */
  overflow:hidden; /* 角丸から画像がはみ出さないようにする */
  border-radius:18px; /* 画像の角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 画像を読み込めない場合の背景色 */
}

/* 各画像 */
.basic-slider_slide img{
  display:block; /* 画像下部にできる余白をなくす */
  width:100%; /* スライドの横幅いっぱいに表示 */
  height:360px; /* 画像の高さ。値を大きくすると画像が高くなる */
  object-fit:cover; /* 縦横比を維持しながら表示領域を埋める */
}

/* ドットナビゲーション */
.basic-slider_dots{
  display:flex; /* ドットを横並びにする */
  align-items:center; /* ドットを縦方向中央へ揃える */
  justify-content:center; /* ドットを横方向中央へ配置する */
  gap:10px; /* ドット同士の間隔。値を大きくすると間隔が広がる */
  margin-top:24px; /* 画像とドットの間隔。値を大きくすると広がる */
}

/* 各ドット */
.basic-slider_dot{
  width:12px; /* ドットの横幅。値を大きくするとドットが大きくなる */
  height:12px; /* ドットの高さ。値を大きくするとドットが大きくなる */
  padding:0; /* ブラウザ標準の内側余白を削除 */
  border:none; /* ブラウザ標準の枠線を削除 */
  border-radius:50%; /* ドットを円形にする */
  background:#cbd5e1; /* 通常時のドット背景色 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
  transition:background-color .3s ease;
  /*
    0.3秒でドットの色を切り替える。
    値を大きくするとゆっくり、小さくすると速くなる。
  */
}

/* 表示中の画像に対応するドット */
.basic-slider_dot.is-active{
  background:#2563eb; /* 選択中のドット背景色 */
}

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

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

  /* スライダー操作エリア */
  .basic-slider_area{
    gap:8px; /* スマートフォンではボタンと画像の間隔を小さくする */
  }

  /* 前へボタンと次へボタン */
  .basic-slider_button{
    width:42px; /* スマートフォンではボタンの横幅を小さくする */
    height:42px; /* スマートフォンではボタンの高さを小さくする */
  }

  /* ボタン内のSVG矢印 */
  .basic-slider_button svg{
    width:22px; /* スマートフォンではSVG矢印を小さくする */
    height:22px; /* スマートフォンではSVG矢印を小さくする */
  }

  /* 各画像 */
  .basic-slider_slide img{
    height:220px; /* スマートフォンでは画像の高さを小さくする */
  }

}

// スライダー操作エリアを取得
const basicSlider=document.querySelector(
  ".basic-slider_area"
);

// 画像を横並びにしている要素を取得
const basicSliderTrack=basicSlider.querySelector(
  ".basic-slider_track"
);

// すべてのスライドを取得
const basicSliderSlides=basicSlider.querySelectorAll(
  ".basic-slider_slide"
);

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

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

// すべてのドットを取得
const basicSliderDots=document.querySelectorAll(
  ".basic-slider_dot"
);

// 現在表示している画像番号
// 0は1枚目、1は2枚目、2は3枚目を表す
let basicSliderIndex=0;

// スライダーの表示を更新する共通処理
function updateBasicSlider(){

  // 現在の画像番号に合わせて表示領域1枚分ずつ横へ移動
  basicSliderTrack.style.transform=
    "translateX(-"+(basicSliderIndex*100)+"%)";

  // 各ドットの選択状態を更新
  basicSliderDots.forEach(function(dot,index){

    // 表示中の画像に対応するドットだけ選択状態にする
    dot.classList.toggle(
      "is-active",
      index===basicSliderIndex
    );

  });

  // 1枚目では前へボタンを無効にする
  basicSliderPrev.disabled=
    basicSliderIndex===0;

  // 最後の画像では次へボタンを無効にする
  basicSliderNext.disabled=
    basicSliderIndex===basicSliderSlides.length-1;

}

// 前へボタンをクリックした時
basicSliderPrev.addEventListener("click",function(){

  // 1枚目より前へ移動しないようにする
  if(basicSliderIndex>0){

    // 画像番号を1つ戻す
    basicSliderIndex--;

    // 表示を更新
    updateBasicSlider();

  }

});

// 次へボタンをクリックした時
basicSliderNext.addEventListener("click",function(){

  // 最後の画像より先へ移動しないようにする
  if(basicSliderIndex<basicSliderSlides.length-1){

    // 画像番号を1つ進める
    basicSliderIndex++;

    // 表示を更新
    updateBasicSlider();

  }

});

// 各ドットへクリック処理を設定
basicSliderDots.forEach(function(dot,index){

  // ドットをクリックした時
  dot.addEventListener("click",function(){

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

    // 表示を更新
    updateBasicSlider();

  });

});

// ページを開いた時の初期表示を設定
updateBasicSlider();

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

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

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

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

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptと3枚のPNG画像で構成されています。HTMLでは3枚の画像、左右のSVG矢印ボタン、画像を直接選択するドットナビゲーションを配置します。CSSでは画像の表示サイズ、左右ボタン、ドット、横方向へ切り替わるアニメーションを設定します。JavaScriptでは現在表示している画像番号を管理し、左右のボタンまたはドットをクリックすると画像を1枚ずつ切り替えます。画像は利用者自身で用意し、sampleフォルダ内のimagesフォルダへ配置します。

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

各ファイルの役割
index.htmlはスライダー本体を構成するファイルです。3枚の画像、前の画像へ戻るボタン、次の画像へ進むボタン、表示する画像を直接選択できる3つのドットを配置しています。画像はimages/image1.png、images/image2.png、images/image3.pngを参照します。画像のファイル名や代替テキストを変更する場合もindex.htmlを編集します。

style.cssはスライダーのレイアウトとデザインを設定するファイルです。画像の高さや角丸、左右ボタンの大きさや色、SVG矢印の大きさ、ドットのサイズや間隔、画像が横方向へ切り替わる時間などを設定します。スライダーの最大横幅は固定せず、width:100%;によって設置場所の横幅に合わせる構成です。

script.jsは画像の切り替えを制御するファイルです。現在表示している画像番号を管理し、左右のボタンをクリックすると前後の画像へ移動します。ドットをクリックすると対応する画像へ直接移動します。また、1枚目を表示しているときは前へボタン、3枚目を表示しているときは次へボタンを無効にします。

imagesフォルダにはスライダーで使用する画像を配置します。このサンプルではimage1.png、image2.png、image3.pngの3枚のPNG画像を使用します。画像ファイルは利用者自身で用意してください。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、同じsampleフォルダ内へimagesフォルダを作成します。利用者自身で用意した3枚のPNG画像をimage1.png、image2.png、image3.pngというファイル名でimagesフォルダへ配置してください。

すべてのファイルと画像を配置したあと、sample/index.htmlをブラウザで開きます。index.htmlから同じ階層のstyle.cssとscript.jsを読み込み、imagesフォルダ内の画像を表示します。左右のSVG矢印ボタンをクリックすると画像を1枚ずつ前後へ切り替えられ、画像下のドットをクリックすると対応する画像へ直接切り替えられます。

カスタマイズできる内容
index.htmlではimages/image1.png、images/image2.png、images/image3.pngを変更することで、スライダーに表示する画像を差し替えられます。別のファイル名を使用する場合は、各img要素のsrcを画像の配置場所に合わせて変更してください。画像を変更した場合は、それぞれのaltも画像の内容に合わせて変更します。画像を増減する場合はbasic-slider_slideと、それぞれに対応するbasic-slider_dotを同じ数になるように追加または削除します。

style.cssでは画像の高さや角丸、左右ボタンのサイズ・背景色、SVG矢印のサイズ、ドットのサイズ・色・間隔、画像を横方向へ切り替えるアニメーション時間などを変更できます。画像にはwidth:100%;とobject-fit:cover;を指定しているため、スライダーの横幅に合わせて画像が伸縮し、指定した高さの表示領域を埋めるように表示されます。元画像の縦横比によっては、上下または左右の一部が切り取られます。

スライダー全体には最大横幅を固定するmax-widthを設定していません。basic-slider_areaへwidth:100%;を指定しているため、設置した場所の横幅に合わせて表示されます。横幅を一定の大きさへ制限したい場合は、設置する親要素側の横幅を調整するか、用途に合わせてbasic-slider_areaへ最大横幅を追加できます。

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

width:100%;
スライダー操作エリアの横幅です。設置した場所の横幅いっぱいに表示します。最大横幅を固定していないため、親要素が広い場合はスライダーもその横幅に合わせて広がります。

gap:18px;
左右のボタンと画像表示エリアの間隔です。値を大きくすると間隔が広がり、小さくすると近くなります。

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

padding:0;
左右ボタンにブラウザ標準の内側余白が入らないようにする指定です。0より大きな値を設定すると、ボタン内部に余白が追加されます。

border-radius:50%;
左右ボタンの角丸です。横幅と高さが同じ状態で50%を指定することで円形になります。値を小さくすると角の丸みが弱くなります。

transition:.3s;
ボタンの状態が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。

opacity:.7;
操作できない左右ボタンの透明度です。値を小さくすると薄くなり、1に近づけると濃く表示されます。

width:24px;・height:24px;
左右ボタン内に表示するSVG矢印の横幅と高さです。値を大きくすると矢印が大きくなり、小さくすると小さくなります。

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

min-width:0;
Flexbox内の画像表示エリアが利用できる横幅に合わせて縮小できるようにする指定です。

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

width:100%;
スライドを並べる要素、各スライド、各画像を利用できる横幅いっぱいに表示するための指定です。100%を基準に設置場所の横幅へ合わせて表示します。

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

flex:0 0 100%;
1枚のスライドを画像表示エリアと同じ横幅にする指定です。100%にすることで、1つの表示領域へ画像を1枚ずつ表示する構成になります。

height:360px;
PC表示時の画像の高さです。値を大きくすると画像表示エリアが高くなり、小さくすると低くなります。画像はobject-fit:cover;で表示領域を埋めるため、高さを変更すると画像の切り取られる範囲も変化します。

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

margin-top:24px;
画像表示エリアとドットナビゲーションの間隔です。24pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

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

padding:0;
ドットにブラウザ標準の内側余白が入らないようにする指定です。0より大きな値を設定すると、ドット内部に余白が追加されます。

border-radius:50%;
ドットを円形にする指定です。横幅と高さが同じ状態で50%を指定することで円形になります。

transition:background-color .3s ease;
表示中の画像が変わったときにドットの色を切り替える時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。

@media (max-width:640px)
スマートフォン向け表示へ切り替える基準となる画面幅です。640px以下になると、ページ全体の余白、左右ボタンと画像表示エリアの間隔、左右ボタン、SVG矢印、画像の高さを変更します。

padding:24px 12px;
640px以下で使用するページ全体の余白です。24pxは上下、12pxは左右の余白を表します。値を小さくすると画像を表示できる横幅が広がります。

gap:8px;
640px以下で使用する左右ボタンと画像表示エリアの間隔です。PC表示の18pxより狭くして、画像を表示する横幅を確保します。

42px
640px以下で使用する左右ボタンの横幅と高さです。PC表示の52pxより小さくして、限られた画面幅でも画像表示エリアを確保します。

22px
640px以下で使用するSVG矢印の横幅と高さです。PC表示の24pxより小さくしています。

height:220px;
640px以下で使用する画像の高さです。値を大きくすると画像表示エリアが高くなり、小さくすると低くなります。

script.js
basicSliderIndex=0;
ページを開いたときに表示する画像番号の初期値です。0は1枚目の画像を表します。値を変更する場合は、存在する画像の番号に対応する0から始まる値を指定します。

basicSliderIndex*100
現在の画像番号に合わせてスライドを横方向へ移動する割合です。1枚進むごとに表示領域の100%分を移動します。

basicSliderIndex===0
1枚目を表示しているかを判断する条件です。画像番号が0の場合は前へボタンを無効にします。

basicSliderSlides.length-1
最後の画像番号を求める処理です。要素番号は0から始まるため、画像の総数から1を引いた値を最後の画像番号として使用します。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssの.basic-slider_areaへwidth:100%;を指定し、画像にもwidth:100%;を指定しているため、スライダーと画像は設置場所の横幅に合わせて伸縮します。最大横幅は固定していないため、PCなど横幅の広い場所へ設置した場合は親要素の横幅に合わせてスライダーが広がります。各スライドにはflex:0 0 100%;を指定しているため、表示領域の横幅が変わっても画像を1枚ずつ表示する構成を維持します。

画面幅640px以下ではメディアクエリを使用し、ページ全体の余白を24px 12px、左右ボタンと画像表示エリアの間隔を8pxへ変更します。左右ボタンは42px × 42px、SVG矢印は22px × 22px、画像の高さは220pxへ変更します。PC表示より操作部分と画像の高さをコンパクトにすることで、スマートフォン・タブレット・PCで利用できる構成にしています。