複数の画像を表示するカルーセルを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

複数の画像を表示するカルーセルを作る方法

複数の画像を表示するカルーセルを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用して、複数枚の画像を横並びで表示し、前へ・次へボタンから順番に切り替えられるカルーセルを作成します。PCでは一度に3枚の画像を表示するため、1枚ずつ表示するカルーセルとは異なり、複数の写真やイメージをまとめて確認できるレイアウトです。

前へ・次へボタンをクリックすると、表示中の画像が1枚分ずつ横方向へ移動します。先頭ではそれ以上前へ移動せず、最後に表示できる位置まで進むと停止する仕組みです。商品画像や作品一覧、施工事例、施設紹介、旅行写真など、複数の画像を限られたスペースで順番に見せたいWebページで利用できます。

画面幅に応じて表示枚数が変わるレスポンシブ対応になっており、PCでは3枚、画面幅768px以下では2枚、600px以下では1枚の画像を表示します。CSSでは画像の高さ、画像同士の間隔、角丸、影、切り替え時間、前へ・次へボタンのサイズなどを調整できます。スマートフォン・タブレット・PCで利用しやすく、複数画像を見やすく整理して掲載したい場合に活用できます。

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

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

デモ

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>1画面に複数の画像を表示するカルーセル</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- カルーセル全体 -->
  <div class="multi-image-carousel_demo">

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

      <!-- 横に並べる画像一覧 -->
      <div class="multi-image-carousel_track" id="multi-image-carousel-track">

        <!-- 画像1：imagesフォルダに配置した画像ファイル名へ変更 -->
        <div class="multi-image-carousel_item">
          <img src="images/【配置した画像のファイル名1】" alt="画像1">
        </div>

        <!-- 画像2：imagesフォルダに配置した画像ファイル名へ変更 -->
        <div class="multi-image-carousel_item">
          <img src="images/【配置した画像のファイル名2】" alt="画像2">
        </div>

        <!-- 画像3：imagesフォルダに配置した画像ファイル名へ変更 -->
        <div class="multi-image-carousel_item">
          <img src="images/【配置した画像のファイル名3】" alt="画像3">
        </div>

        <!-- 画像4：imagesフォルダに配置した画像ファイル名へ変更 -->
        <div class="multi-image-carousel_item">
          <img src="images/【配置した画像のファイル名4】" alt="画像4">
        </div>

        <!-- 画像5：imagesフォルダに配置した画像ファイル名へ変更 -->
        <div class="multi-image-carousel_item">
          <img src="images/【配置した画像のファイル名5】" alt="画像5">
        </div>

        <!-- 画像6：imagesフォルダに配置した画像ファイル名へ変更 -->
        <div class="multi-image-carousel_item">
          <img src="images/【配置した画像のファイル名6】" alt="画像6">
        </div>

      </div>

    </div>

    <!-- 前へ・次へボタン -->
    <div class="multi-image-carousel_buttons">
      <button type="button" id="multi-image-carousel-prev" aria-label="前へ">前へ</button>
      <button type="button" id="multi-image-carousel-next" aria-label="次へ">次へ</button>
    </div>

  </div>

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

</body>
</html>

/* ページ全体 */
body{
  margin:0;  /* ページ外側の余白 */
  font-family:sans-serif;  /* 使用するフォント */
  background:#f8fafc;  /* ページ背景色 */
}

/* カルーセル全体 */
.multi-image-carousel_demo{
  max-width:980px;  /* 最大横幅 */
  margin:40px auto;  /* 上下余白と中央寄せ */
  padding:24px;  /* 外側余白 */
  box-sizing:border-box;  /* paddingを幅に含める */
}

/* 画像表示エリア */
.multi-image-carousel_view{
  overflow:hidden;  /* はみ出した画像を隠す */
  border-radius:20px;  /* 角丸 */
}

/* 横に並べる画像一覧 */
.multi-image-carousel_track{
  display:flex;  /* 画像を横並び */
  gap:20px;  /* 画像同士の間隔 */
  transition:transform .5s ease;  /* スライド速度：.5sを大きくすると遅く、小さくすると速くなる */
}

/* 画像1枚分 */
.multi-image-carousel_item{
  flex:0 0 calc((100% - 40px) / 3);  /* PCでは3枚表示 */
  overflow:hidden;  /* 角丸からはみ出す部分を隠す */
  border-radius:18px;  /* 画像の角丸 */
  background:#e0f2fe;  /* 読み込み中の背景色 */
  box-shadow:0 10px 25px rgba(15,23,42,.08);  /* 影 */
}

/* 画像 */
.multi-image-carousel_item img{
  display:block;  /* 画像下の余白を消す */
  width:100%;  /* 横幅いっぱい */
  height:240px;  /* 画像高さ：変更すると画像の縦サイズが変わる */
  object-fit:cover;  /* 画像を枠いっぱいに表示 */
}

/* 前へ・次へボタンエリア */
.multi-image-carousel_buttons{
  display:flex;  /* 横並び */
  justify-content:center;  /* 中央寄せ */
  gap:14px;  /* ボタン同士の間隔 */
  margin-top:24px;  /* 画像との間隔 */
}

/* 前へ・次へボタン */
.multi-image-carousel_buttons button{
  position:relative;  /* 疑似要素の基準 */
  display:flex;  /* 中央配置 */
  align-items:center;  /* 縦中央 */
  justify-content:center;  /* 横中央 */
  width:52px;  /* ボタン横幅 */
  height:52px;  /* ボタン高さ */
  padding:0;  /* 内側余白なし */
  border:1px solid #bfdbfe;  /* 枠線 */
  border-radius:50%;  /* 円形 */
  background:linear-gradient(135deg,#2563eb,#1e40af);  /* 背景 */
  cursor:pointer;  /* カーソル */
  box-shadow:0 10px 22px rgba(37,99,235,.28);  /* 影 */
  transition:transform .2s ease, box-shadow .2s ease;  /* ホバー速度 */
  font-size:0;  /* ボタン内の文字を非表示 */
}

/* 矢印アイコン */
.multi-image-carousel_buttons button::before{
  content:"";  /* 矢印用の空要素 */
  width:12px;  /* 矢印横幅 */
  height:12px;  /* 矢印高さ */
  border-top:3px solid #ffffff;  /* 矢印の線 */
  border-right:3px solid #ffffff;  /* 矢印の線 */
}

/* 前へ矢印 */
#multi-image-carousel-prev::before{
  transform:rotate(-135deg);  /* 左向き矢印 */
  margin-left:4px;  /* 中央位置の微調整 */
}

/* 次へ矢印 */
#multi-image-carousel-next::before{
  transform:rotate(45deg);  /* 右向き矢印 */
  margin-right:4px;  /* 中央位置の微調整 */
}

/* ボタンホバー */
.multi-image-carousel_buttons button:hover{
  transform:translateY(-2px);  /* 少し浮かせる */
  box-shadow:0 14px 28px rgba(37,99,235,.35);  /* 影を強くする */
}

/* タブレット表示 */
@media(max-width:768px){
  .multi-image-carousel_item{
    flex:0 0 calc((100% - 20px) / 2);  /* タブレットでは2枚表示 */
  }
}

/* スマホ表示 */
@media(max-width:600px){
  .multi-image-carousel_item{
    flex:0 0 100%;  /* スマホでは1枚表示 */
  }

  .multi-image-carousel_item img{
    height:220px;  /* スマホ時の画像高さ */
  }
}

// カルーセル本体
const multiImageCarouselTrack = document.getElementById("multi-image-carousel-track");

// 画像一覧
const multiImageCarouselItems = document.querySelectorAll(".multi-image-carousel_item");

// 前へボタン
const multiImageCarouselPrev = document.getElementById("multi-image-carousel-prev");

// 次へボタン
const multiImageCarouselNext = document.getElementById("multi-image-carousel-next");

// 現在の表示位置
let multiImageCarouselIndex = 0;

// 現在の画面幅に応じた表示枚数を取得
function multiImageCarouselVisibleCount(){

  // スマホ
  if(window.innerWidth <= 600){
    return 1;
  }

  // タブレット
  if(window.innerWidth <= 768){
    return 2;
  }

  // パソコン
  return 3;

}

// カルーセルを移動
function multiImageCarouselMove(){

  // 画像同士の間隔
  const gap = 20;

  // 画像1枚分の横幅
  const itemWidth = multiImageCarouselItems[0].offsetWidth + gap;

  // スライド位置を更新
  multiImageCarouselTrack.style.transform =
    "translateX(-" + (multiImageCarouselIndex * itemWidth) + "px)";

}

// 次へボタン
multiImageCarouselNext.addEventListener("click", function(){

  // 最後まで到達していなければ進める
  if(
    multiImageCarouselIndex <
    multiImageCarouselItems.length - multiImageCarouselVisibleCount()
  ){
    multiImageCarouselIndex++;
  }

  // 表示更新
  multiImageCarouselMove();

});

// 前へボタン
multiImageCarouselPrev.addEventListener("click", function(){

  // 最初より前へ行かない
  if(multiImageCarouselIndex > 0){
    multiImageCarouselIndex--;
  }

  // 表示更新
  multiImageCarouselMove();

});

// 画面サイズ変更時
window.addEventListener("resize", function(){

  // 表示可能枚数を超えないよう補正
  const maxIndex =
    multiImageCarouselItems.length - multiImageCarouselVisibleCount();

  if(multiImageCarouselIndex > maxIndex){
    multiImageCarouselIndex = Math.max(0, maxIndex);
  }

  // 再描画
  multiImageCarouselMove();

});

// 初回表示
multiImageCarouselMove();

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

ファイル構成と設置方法

このサンプルは、HTML・CSS・JavaScriptを使用して、1画面に複数の画像を表示するカルーセルを作成します。HTMLでは6枚の画像と前へ・次へボタンを配置し、CSSでは画像を横並びにして、画面幅に応じた表示枚数や画像サイズ、角丸、余白、ボタンデザインなどを設定します。JavaScriptでは現在の表示位置を管理し、前へ・次へボタンをクリックしたときに画像一覧を1枚分ずつ横方向へ移動させます。

サンプルはindex.html、style.css、script.jsの3ファイルと、カルーセルで使用する6枚の画像で構成されています。使用する画像はimagesフォルダへ配置し、index.htmlから読み込みます。

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

各ファイルの役割
index.htmlはカルーセル全体を構成するファイルです。6枚の画像を横並びにするための要素と、前へ・次へボタンを配置します。表示する画像を変更する場合は、imagesフォルダへ画像を配置し、それぞれのimg要素のsrc属性を実際の画像ファイル名へ変更します。

style.cssはカルーセルのレイアウトとデザインを設定するファイルです。カルーセル全体の最大横幅、画像同士の間隔、画像の高さ、角丸、影、移動時間、前へ・次へボタンのサイズやデザインを変更できます。また、PCでは3枚、タブレットでは2枚、スマートフォンでは1枚を表示するレスポンシブ設定も含まれています。

script.jsはカルーセルの移動を制御するファイルです。現在の表示位置を管理し、前へ・次へボタンをクリックしたときに画像1枚分の横幅と間隔を計算して、画像一覧を横方向へ移動させます。また、画面サイズが変更された場合は表示可能枚数を再計算し、表示位置が範囲外にならないよう補正します。

imagesフォルダには、カルーセルで使用する6枚の画像を配置します。このサンプルではimage1.pngからimage6.pngまでの6枚を使用します。画像ファイル自体は利用者が用意してください。

設置方法・使い方
sampleフォルダ内へindex.html、style.css、script.jsを保存し、同じ階層へimagesフォルダを作成します。imagesフォルダの中へ、使用する6枚の画像をimage1.png、image2.png、image3.png、image4.png、image5.png、image6.pngというファイル名で配置してください。

配置後にindex.htmlの各img要素のsrc属性を、実際に配置した画像ファイル名へ変更します。設定が終わったらsample/index.htmlをブラウザで開いてください。前へ・次へボタンをクリックすると、表示中の画像が1枚分ずつ横方向へ移動します。先頭ではそれ以上前へ移動せず、最後に表示できる位置ではそれ以上次へ進まない仕様です。

カスタマイズできる内容
index.htmlでは、表示する画像、画像の代替テキスト、画像の枚数を変更できます。画像を追加する場合はmulti-image-carousel_track内へmulti-image-carousel_itemを追加し、対応する画像をimagesフォルダへ配置します。画像を減らす場合は不要な項目を削除します。

style.cssでは、カルーセル全体の最大横幅、外側余白、画像同士の間隔、画像の高さ、画像の角丸、影、切り替え速度、前へ・次へボタンのサイズや間隔などを変更できます。PC・タブレット・スマートフォンそれぞれの表示枚数もCSSで調整できます。

数値調整
style.css

max-width:980px;
カルーセル全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。

margin:40px auto;
カルーセル全体の上下余白です。40pxを大きくすると上下の間隔が広がります。

padding:24px;
カルーセル全体の内側余白です。値を大きくするとカルーセルと画面端との間隔が広がります。

gap:20px;
画像同士の間隔です。値を大きくすると画像間の余白が広がり、小さくすると狭くなります。JavaScript側でも同じ20pxを使用して移動距離を計算しているため、この値を変更する場合はscript.jsのconst gap = 20;も同じ値へ変更してください。

flex:0 0 calc((100% - 40px) / 3);
PC表示で1画面に3枚の画像を表示する設定です。40pxは2か所分の画像間隔を表し、3は表示枚数を表します。

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

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

transition:transform .5s ease;
カルーセルが横方向へ移動する時間です。.5sを大きくするとゆっくり移動し、小さくすると速く移動します。

gap:14px;
前へ・次へボタン同士の間隔です。値を大きくするとボタン間の距離が広がります。

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

width:12px;・height:12px;
ボタン内に表示する矢印の大きさです。値を変更すると矢印サイズを調整できます。

height:220px;
画面幅600px以下で使用する画像の高さです。値を変更するとスマートフォン表示時の画像高さが変わります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。通常はflex:0 0 calc((100% - 40px) / 3);によって1画面に3枚の画像を表示します。画面幅768px以下ではcalc((100% - 20px) / 2)へ切り替えて2枚表示にし、画面幅600px以下ではflex:0 0 100%として1枚表示に変更します。

JavaScript側でも画面幅を確認し、600px以下では1枚、768px以下では2枚、それより大きい画面では3枚として表示可能枚数を管理しています。画面サイズを変更した場合も移動位置を補正するため、スマートフォン・タブレット・PCで利用できます。