縦スクロールカルーセルを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

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

縦スクロールカルーセルを作る方法

HTML・CSS・JavaScriptを使って、複数の画像を縦方向へ切り替えて表示するカルーセルを作る方法を紹介します。このサンプルでは画像を上下方向に並べ、上ボタンと下ボタンをクリックすると表示位置が1つずつ移動する構成にしています。一般的な横方向のカルーセルとは異なり、縦長のスペースを利用して画像を順番に見せたい場合に使いやすいカルーセルです。

パソコンでは3枚の画像を同時に表示し、上下の操作ボタンから続きの画像へ移動できます。最初の位置では上ボタン、最後の位置では下ボタンが自動的に無効になるため、表示できる範囲を超えて移動することはありません。現在位置を示すドットも縦方向に配置し、ドットをクリックして対応する位置へ直接移動できます。

画面幅640px以下では表示枚数を1枚へ切り替え、スマートフォンでも画像を見やすい大きさで表示します。画像の縦横比、画像同士の間隔、ボタンやドットの大きさ、移動時間などはCSSから変更できます。商品画像、作品一覧、写真ギャラリーなど、複数の画像を縦方向へ切り替えて見せたいWebページで利用できるサンプルです。

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

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

デモ

縦スクロールカルーセル

上下のボタンまたはドットから画像を切り替えられます。

上下のボタンをクリックすると画像が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="vertical-carousel_area">

    <!-- 前の画像を表示するボタン -->
    <button class="vertical-carousel_button vertical-carousel_prev" type="button" aria-label="前の画像を表示">

      <!-- 上矢印 -->
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="m6 15 6-6 6 6"></path>
      </svg>

    </button>

    <!-- 画像とドットを配置する部分 -->
    <div class="vertical-carousel_content">

      <!-- 画像の表示範囲 -->
      <div class="vertical-carousel_view">

        <!-- 縦方向へ移動する画像一覧 -->
        <div class="vertical-carousel_track">

          <!--
            カルーセルで使用する画像は利用者自身で用意してください。
            PNG画像をsample/images/へ配置し、
            image1.png〜image5.pngを実際のファイル名へ変更できます。
          -->

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

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

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

          <!-- 4枚目の画像 -->
          <div class="vertical-carousel_item">
            <img class="vertical-carousel_image" src="images/image4.png" alt="4枚目の画像">
          </div>

          <!-- 5枚目の画像 -->
          <div class="vertical-carousel_item">
            <img class="vertical-carousel_image" src="images/image5.png" alt="5枚目の画像">
          </div>

        </div>

      </div>

      <!-- 現在位置を示すドット -->
      <div class="vertical-carousel_dots">

        <button class="vertical-carousel_dot is-active" type="button" aria-label="1番目の位置を表示"></button>
        <button class="vertical-carousel_dot" type="button" aria-label="2番目の位置を表示"></button>
        <button class="vertical-carousel_dot" type="button" aria-label="3番目の位置を表示"></button>
        <button class="vertical-carousel_dot" type="button" aria-label="4番目の位置を表示"></button>
        <button class="vertical-carousel_dot" type="button" aria-label="5番目の位置を表示"></button>

      </div>

    </div>

    <!-- 次の画像を表示するボタン -->
    <button class="vertical-carousel_button vertical-carousel_next" type="button" aria-label="次の画像を表示">

      <!-- 下矢印 -->
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="m6 9 6 6 6-6"></path>
      </svg>

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

/* 縦スクロールカルーセル本体 */
.vertical-carousel_area{
  display:flex; /* 上ボタン・画像・下ボタンを配置する */
  flex-direction:column; /* 縦方向へ並べる */
  align-items:center; /* 横方向の中央へ揃える */
  width:100%; /* 設置した場所の横幅いっぱいに表示する */
  gap:18px; /* ボタンと画像表示部分の間隔。値を大きくすると間隔が広がる */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* 上下の操作ボタン */
.vertical-carousel_button{
  display:flex; /* 矢印を中央へ配置する */
  align-items:center; /* 矢印を縦方向の中央へ配置する */
  justify-content:center; /* 矢印を横方向の中央へ配置する */
  flex-shrink:0; /* ボタンが縮まないようにする */
  width:48px; /* ボタンの横幅。値を大きくするとボタンが大きくなる */
  height:48px; /* ボタンの高さ。値を大きくするとボタンが大きくなる */
  padding:0; /* ボタン内側の余白。0では追加の余白を付けない */
  border:none; /* ボタンの枠線を非表示 */
  border-radius:50%; /* 50%で円形にする */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* 矢印の色 */
  cursor:pointer; /* マウスを重ねたときにポインターを表示 */
}

/* 操作できないボタン */
.vertical-carousel_button:disabled{
  background:#cbd5e1; /* 操作できないボタンの背景色 */
  cursor:default; /* 操作できない状態のカーソル */
}

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

/* 画像とドットを配置する部分 */
.vertical-carousel_content{
  display:flex; /* 画像とドットを横並びにする */
  align-items:center; /* 縦方向の中央へ揃える */
  width:100%; /* 設置場所の横幅いっぱいに表示する */
  gap:16px; /* 画像とドットの間隔。値を大きくすると間隔が広がる */
}

/* カルーセルの表示範囲 */
.vertical-carousel_view{
  flex:1; /* ドット以外の横幅を使用する */
  min-width:0; /* Flexbox内で正しく縮小できるようにする */
  height:660px; /* 3枚を表示する高さ。値を大きくすると表示領域が高くなる */
  overflow:hidden; /* 表示範囲の外側にある画像を隠す */
}

/* 縦方向へ移動する画像一覧 */
.vertical-carousel_track{
  display:flex; /* 画像を並べる */
  flex-direction:column; /* 画像を縦方向へ並べる */
  gap:16px; /* 画像同士の間隔。値を大きくすると間隔が広がる */
  transition:transform .3s ease; /* 0.3秒で移動する。値を大きくすると遅くなり、小さくすると速くなる */
}

/* 1つの画像項目 */
.vertical-carousel_item{
  flex:0 0 calc((660px - 32px) / 3); /* 16pxの間隔2か所を除き、3枚を同時表示する */
  min-height:0; /* 画像項目が必要以上に高くならないようにする */
  overflow:hidden; /* 角丸からはみ出した画像を隠す */
  border-radius:16px; /* 画像の角丸。値を大きくすると丸みが強くなる */
}

/* 表示する画像 */
.vertical-carousel_image{
  display:block; /* 画像下部にできる余白を防ぐ */
  width:100%; /* 画像項目の横幅いっぱいに表示する */
  height:100%; /* 画像項目の高さいっぱいに表示する */
  object-fit:cover; /* 表示領域を埋めるように画像をトリミングする */
}

/* ドット全体 */
.vertical-carousel_dots{
  display:flex; /* ドットを並べる */
  flex-direction:column; /* ドットを縦方向へ並べる */
  align-items:center; /* ドットを横方向の中央へ揃える */
  justify-content:center; /* ドット全体を縦方向の中央へ配置する */
  flex-shrink:0; /* ドット部分が縮まないようにする */
  gap:10px; /* ドット同士の間隔。値を大きくすると間隔が広がる */
}

/* 各ドット */
.vertical-carousel_dot{
  width:12px; /* ドットの横幅。値を大きくするとドットが大きくなる */
  height:12px; /* ドットの高さ。値を大きくするとドットが大きくなる */
  padding:0; /* ドット内側の余白。0では追加の余白を付けない */
  border:none; /* ドットの枠線を非表示 */
  border-radius:50%; /* 50%で円形にする */
  background:#cbd5e1; /* 通常時のドットの色 */
  cursor:pointer; /* マウスを重ねたときにポインターを表示 */
}

/* 現在位置のドット */
.vertical-carousel_dot.is-active{
  background:#2563eb; /* 現在位置のドットの色 */
}

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

  /* 縦スクロールカルーセル本体 */
  .vertical-carousel_area{
    gap:12px; /* ボタンと画像表示部分の間隔を狭くする */
  }

  /* 上下の操作ボタン */
  .vertical-carousel_button{
    width:42px; /* スマートフォン時のボタンの横幅 */
    height:42px; /* スマートフォン時のボタンの高さ */
  }

  /* ボタン内の矢印 */
  .vertical-carousel_button svg{
    width:22px; /* スマートフォン時の矢印の横幅 */
    height:22px; /* スマートフォン時の矢印の高さ */
  }

  /* 画像とドットを配置する部分 */
  .vertical-carousel_content{
    gap:12px; /* スマートフォン時の画像とドットの間隔 */
  }

  /* カルーセルの表示範囲 */
  .vertical-carousel_view{
    height:280px; /* スマートフォンで1枚を表示する高さ */
  }

  /* 縦方向へ移動する画像一覧 */
  .vertical-carousel_track{
    gap:12px; /* スマートフォン時の画像同士の間隔 */
  }

  /* 1つの画像項目 */
  .vertical-carousel_item{
    flex:0 0 280px; /* スマートフォンでは高さ280pxの画像を1枚表示する */
  }

}

/* カルーセル本体を取得 */
const verticalCarouselArea=document.querySelector(
  ".vertical-carousel_area"
);

/* 縦方向へ移動する画像一覧を取得 */
const verticalCarouselTrack=verticalCarouselArea.querySelector(
  ".vertical-carousel_track"
);

/* すべての画像項目を取得 */
const verticalCarouselItems=verticalCarouselArea.querySelectorAll(
  ".vertical-carousel_item"
);

/* 前へ戻るボタンを取得 */
const verticalCarouselPrev=verticalCarouselArea.querySelector(
  ".vertical-carousel_prev"
);

/* 次へ進むボタンを取得 */
const verticalCarouselNext=verticalCarouselArea.querySelector(
  ".vertical-carousel_next"
);

/* すべてのドットを取得 */
const verticalCarouselDots=verticalCarouselArea.querySelectorAll(
  ".vertical-carousel_dot"
);

/* 現在の表示位置。0が最初の位置 */
let verticalCarouselIndex=0;

/* 画面幅に応じて同時表示する画像数を返す */
function getVerticalCarouselVisibleCount(){

  /* 640px以下では1枚表示 */
  if(window.innerWidth<=640){
    return 1;
  }

  /* 640pxより大きい画面では3枚表示 */
  return 3;

}

/* カルーセルの表示を更新 */
function updateVerticalCarousel(){

  /* 現在の同時表示数を取得 */
  const visibleCount=
    getVerticalCarouselVisibleCount();

  /* 移動できる最後の位置を計算 */
  const maxIndex=
    verticalCarouselItems.length-visibleCount;

  /* 画面幅変更時に最後の位置を超えないよう調整 */
  if(verticalCarouselIndex>maxIndex){
    verticalCarouselIndex=maxIndex;
  }

  /* 1つ目の画像項目を取得 */
  const firstItem=
    verticalCarouselItems[0];

  /* 画像項目1つ分の高さを取得 */
  const itemHeight=
    firstItem.getBoundingClientRect().height;

  /* 画像一覧のCSS情報を取得 */
  const trackStyle=
    window.getComputedStyle(verticalCarouselTrack);

  /* 画像同士の間隔を取得。取得できない場合は0 */
  const gap=
    parseFloat(trackStyle.rowGap) || 0;

  /* 現在位置に合わせて画像一覧を縦方向へ移動 */
  verticalCarouselTrack.style.transform=
    "translateY(-"+
    ((itemHeight+gap)*verticalCarouselIndex)+
    "px)";

  /* ドットの表示状態を更新 */
  verticalCarouselDots.forEach(function(dot,index){

    /* 現在の画面幅で使用できるドットだけ表示 */
    const isAvailable=
      index<=maxIndex;

    dot.hidden=!isAvailable;

    /* 現在位置のドットだけ有効状態にする */
    dot.classList.toggle(
      "is-active",
      index===verticalCarouselIndex
    );

  });

  /* 最初の位置では前へ戻るボタンを無効化 */
  verticalCarouselPrev.disabled=
    verticalCarouselIndex===0;

  /* 最後の位置では次へ進むボタンを無効化 */
  verticalCarouselNext.disabled=
    verticalCarouselIndex===maxIndex;

}

/* 前へ戻るボタンをクリックしたとき */
verticalCarouselPrev.addEventListener("click",function(){

  /* 最初の位置より後ろにいる場合だけ1つ戻す */
  if(verticalCarouselIndex>0){

    verticalCarouselIndex--;

    updateVerticalCarousel();

  }

});

/* 次へ進むボタンをクリックしたとき */
verticalCarouselNext.addEventListener("click",function(){

  /* 現在の同時表示数を取得 */
  const visibleCount=
    getVerticalCarouselVisibleCount();

  /* 移動できる最後の位置を計算 */
  const maxIndex=
    verticalCarouselItems.length-visibleCount;

  /* 最後の位置より前にいる場合だけ1つ進める */
  if(verticalCarouselIndex<maxIndex){

    verticalCarouselIndex++;

    updateVerticalCarousel();

  }

});

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

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

    /* 現在の同時表示数を取得 */
    const visibleCount=
      getVerticalCarouselVisibleCount();

    /* 移動できる最後の位置を計算 */
    const maxIndex=
      verticalCarouselItems.length-visibleCount;

    /* 現在使用できる位置の場合だけ移動 */
    if(index<=maxIndex){

      verticalCarouselIndex=index;

      updateVerticalCarousel();

    }

  });

});

/* 画面幅が変更されたとき表示位置を再計算 */
window.addEventListener("resize",function(){

  updateVerticalCarousel();

});

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

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

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

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

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

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptと5枚のPNG画像で構成されています。HTMLでは上下の操作ボタン、縦方向へ並べる5枚の画像、現在位置を選択できるドットを配置します。CSSでは画像を縦方向へ並べるレイアウト、表示領域の高さ、画像同士の間隔、上下ボタン、ドット、切り替えアニメーションなどを設定します。JavaScriptでは上下のボタンやドットを操作したときの移動処理を行い、画面幅に応じて同時に表示する画像数と移動できる位置を切り替えます。画像は利用者自身で用意し、sampleフォルダ内のimagesフォルダへ配置します。

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

各ファイルの役割
index.htmlは縦型カルーセルを構成するファイルです。前の位置へ戻る上ボタン、次の位置へ進む下ボタン、画像を配置する5つの項目、表示位置を直接選択するドットを記述しています。画像はimages/image1.pngからimages/image5.pngまでを参照します。画像のファイル名や代替テキストを変更する場合もindex.htmlを編集します。

style.cssは縦型カルーセルのレイアウトとデザインを設定するファイルです。画像を縦方向へ並べ、640pxより大きい画面では高さ660pxの表示領域へ3枚、640px以下では高さ280pxの表示領域へ1枚を表示します。上下の操作ボタン、画像同士の間隔、画像の角丸、ドット、画像が縦方向へ移動する時間などもこのファイルで設定します。

script.jsはカルーセルの移動を制御するファイルです。上下のボタンをクリックすると画像を1枚分ずつ縦方向へ移動し、ドットをクリックすると対応する位置へ直接移動します。最初と最後の位置では、それ以上移動できない方向のボタンを無効にします。また、画面幅に応じて同時表示数と移動可能な位置を計算し、画面幅が変更された場合にも表示位置を更新します。

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

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

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

カスタマイズできる内容
index.htmlではカルーセルに表示する画像を変更できます。各img要素のsrcを使用する画像のパスへ変更し、altも画像の内容に合わせて変更してください。画像を追加または削除する場合は、vertical-carousel_itemを必要な数に変更し、移動できる位置に合わせてvertical-carousel_dotも調整します。

style.cssでは上下の操作ボタンの大きさや色、画像表示領域の高さ、画像同士の間隔、画像の角丸、ドットの大きさ・色・間隔、画像が縦方向へ移動する時間などを変更できます。画像にはobject-fit:cover;を指定しているため、各画像項目の表示領域を埋めるように表示されます。元画像の縦横比によっては、上下または左右の一部が切り取られます。

640pxより大きい画面では3枚、640px以下では1枚を同時表示する構成です。表示枚数を変更する場合は、style.cssの表示領域の高さと各画像項目の高さだけでなく、script.jsで使用している同時表示数の計算も合わせて変更する必要があります。

数値調整
style.css
width:100%;
カルーセル本体の横幅です。100%では設置した親要素の横幅いっぱいに表示されます。

gap:18px;
上下の操作ボタンと画像表示部分の間隔です。値を大きくすると間隔が広がり、小さくすると狭くなります。

width:48px;・height:48px;
上下の操作ボタンの横幅と高さです。値を大きくするとボタンが大きくなり、小さくすると小さくなります。

padding:0;
上下の操作ボタンに追加する内側余白です。0ではブラウザ標準の内側余白を付けません。値を大きくするとボタン内部の余白が増えます。

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

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

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

gap:16px;
640pxより大きい画面で使用する画像同士の間隔です。値を大きくすると画像間の余白が広がり、小さくすると狭くなります。

height:660px;
640pxより大きい画面で使用する画像表示領域の高さです。値を大きくすると表示領域が縦方向へ高くなり、小さくすると低くなります。

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

flex:0 0 calc((660px - 32px) / 3);
640pxより大きい画面で3枚の画像を同時表示するための1枚分の高さです。660pxの表示領域から16pxの画像間隔2か所分となる32pxを除き、3等分しています。表示領域の高さ、画像同士の間隔、表示枚数を変更する場合は、この計算式も合わせて調整します。

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

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

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

padding:0;
ドットに追加する内側余白です。0ではブラウザ標準の内側余白を付けません。値を大きくするとドット内部の余白が増えます。

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

@media (max-width:640px)
1枚表示へ切り替える基準となる画面幅です。640px以下になると、上下の操作ボタンと画像表示部分の間隔、ボタンサイズ、SVG矢印のサイズ、画像とドットの間隔、画像表示領域の高さ、各画像の高さを変更します。

gap:12px;
640px以下で使用する上下の操作ボタンと画像表示部分の間隔、および画像とドットの間隔です。値を大きくすると間隔が広がり、小さくすると狭くなります。

42px
640px以下で使用する上下の操作ボタンの横幅と高さです。PC表示の48pxより小さくします。

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

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

flex:0 0 280px;
640px以下で使用する画像1枚分の高さです。画像表示領域と同じ280pxにすることで、1枚の画像を表示します。

script.js
window.innerWidth<=640
同時表示する画像数を切り替える基準です。画面幅が640px以下の場合は1枚、それより大きい場合は3枚を同時表示する前提で移動位置を計算します。style.cssの@media (max-width:640px)と同じ基準値を使用しています。

1・3
画面幅に応じた同時表示数です。640px以下では1枚、それより大きい画面では3枚を使用します。表示枚数を変更する場合は、style.cssの画像表示領域と各画像項目の高さも合わせて変更します。

レスポンシブ対応
このサンプルはレスポンシブ対応です。640pxより大きい画面では画像表示領域をheight:660px;とし、各画像項目をflex:0 0 calc((660px - 32px) / 3);にすることで3枚を同時表示します。画像同士には16pxの間隔を設け、上下の操作ボタンまたはドットから表示位置を縦方向へ切り替えられます。

画面幅640px以下では@media (max-width:640px)を使用し、画像表示領域を280px、各画像の高さも280pxへ変更して1枚表示に切り替えます。上下の操作ボタンと画像表示部分の間隔は12px、ボタンは42px、SVG矢印は22pxへ縮小します。script.jsでもwindow.innerWidth<=640を使用して同じ画面幅を基準に表示枚数を1枚または3枚へ切り替え、画面幅が変更された場合には移動できる位置と現在位置を再計算します。これにより、スマートフォン・タブレット・PCの画面幅に合わせて利用できます。