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

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

1画面に複数の画像を表示するカルーセルをHTML・CSS・JavaScriptで作る方法を紹介します。1枚ずつ大きく切り替えるカルーセルではなく、複数の画像を横並びで表示しながら、左右のボタンで次の画像へスライドできるサンプルです。

このサンプルでは、画像を横一列に並べ、表示エリアからはみ出した部分を隠すことでカルーセルの見た目を作成します。JavaScriptで現在位置を管理し、前へ・次へボタンをクリックすると画像一覧が横へ移動します。画面幅に合わせて表示枚数も変わるため、パソコン・タブレット・スマホでも使いやすい構成です。

写真ギャラリー、制作実績、商品画像、旅行写真、バナー一覧など、複数の画像を限られたスペースで見せたい場面に向いています。画像ファイルを差し替えるだけで利用できるため、シンプルな画像カルーセルを作りたい場合にも導入しやすいサンプルです。

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

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

デモ

矢印ボタンをおしゃれにして　全分書き出して

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

<!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・JavaScriptの3ファイルで構成されています。HTMLにはカルーセルのレイアウト、CSSには複数画像を横並びで表示するデザインやレスポンシブ対応、JavaScriptには前へ・次へボタンによるスライド処理を記述しています。サンプル画像は含まれていないため、画像はご自身で用意してください。また、sampleフォルダ内にimagesフォルダを作成し、その中へ使用する画像を配置してください。

sample/
├── index.html
├── style.css
├── script.js
└── images/　　　← このフォルダは自分で作成
    ├── 画像1.jpg
    ├── 画像2.jpg
    ├── 画像3.jpg
    ├── 画像4.jpg
    ├── 画像5.jpg
    └── 画像6.jpg

sample/index.htmlをブラウザで開くとカルーセルを確認できます。画像はsample/images/へ配置し、index.html内の画像ファイル名を配置した画像名へ変更してください。画像を増減する場合はHTMLの画像ブロックを追加・削除するだけで対応できます。スライド速度はstyle.cssのtransition: transform .5s ease;で変更でき、.5sを大きくするとゆっくり、小さくすると速くなります。