サムネイル画像をクリックして切り替えるカルーセルを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

サムネイル画像をクリックして切り替えるカルーセルを作る方法

サムネイル画像をクリックして切り替えるカルーセルをHTML・CSS・JavaScriptで作る方法を紹介します。メイン画像の下にサムネイル画像を一覧表示し、クリックした画像へ瞬時に切り替えられるシンプルなカルーセルです。商品紹介やギャラリー、制作実績、旅行写真など、複数の画像を分かりやすく表示したい場面で利用できます。

このサンプルでは、メイン画像とサムネイル画像を連動させ、クリックしたサムネイルを選択状態として表示します。ライブラリは使用せず、HTML・CSS・JavaScriptだけで実装しているため、そのまま導入しやすく、画像枚数を増減するカスタマイズも行いやすい構成になっています。

デモではサンプル画像として https://picsum.photos/ の画像を使用していますが、配布用コードには画像ファイルは含まれていません。ご利用の際は、お手持ちの画像を sample/images/ フォルダへ配置し、HTML内の画像パスを書き換えることで利用できます。画像ギャラリーや商品画像の切り替えUIを作りたい方にもおすすめのサンプルです。

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

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

デモ

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

<!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="thumbnail-carousel_demo">

    <!-- メイン画像エリア -->
    <div class="thumbnail-carousel_main">

      <!--
        表示中のメイン画像
        images/【配置した画像のファイル名】 の部分を実際の画像ファイル名に変更
      -->
      <img id="thumbnail-carousel-main" src="images/【配置した画像のファイル名1】" alt="メイン画像">

    </div>

    <!-- サムネイル一覧 -->
    <div class="thumbnail-carousel_thumbs">

      <!-- サムネイル1：data-image と img src に同じ画像ファイル名を指定 -->
      <button class="thumbnail-carousel_thumb is-active" type="button" data-image="images/【配置した画像のファイル名1】">
        <img src="images/【配置した画像のファイル名1】" alt="サムネイル1">
      </button>

      <!-- サムネイル2：data-image と img src に同じ画像ファイル名を指定 -->
      <button class="thumbnail-carousel_thumb" type="button" data-image="images/【配置した画像のファイル名2】">
        <img src="images/【配置した画像のファイル名2】" alt="サムネイル2">
      </button>

      <!-- サムネイル3：data-image と img src に同じ画像ファイル名を指定 -->
      <button class="thumbnail-carousel_thumb" type="button" data-image="images/【配置した画像のファイル名3】">
        <img src="images/【配置した画像のファイル名3】" alt="サムネイル3">
      </button>

      <!-- サムネイル4：data-image と img src に同じ画像ファイル名を指定 -->
      <button class="thumbnail-carousel_thumb" type="button" data-image="images/【配置した画像のファイル名4】">
        <img src="images/【配置した画像のファイル名4】" alt="サムネイル4">
      </button>

    </div>

  </div>

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

</body>
</html>

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

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

/* メイン画像エリア */
.thumbnail-carousel_main{
  overflow:hidden;  /* はみ出しを隠す */
  border-radius:24px;  /* 角丸 */
  background:#e0f2fe;  /* 背景色 */
  box-shadow:0 16px 35px rgba(15,23,42,.12);  /* 影 */
}

/* メイン画像 */
.thumbnail-carousel_main img{
  display:block;  /* 画像下の余白を消す */
  width:100%;  /* 横幅いっぱい */
  height:420px;  /* 画像の高さ */
  object-fit:cover;  /* 枠いっぱいにトリミング */
}

/* サムネイル一覧 */
.thumbnail-carousel_thumbs{
  display:grid;  /* グリッド配置 */
  grid-template-columns:repeat(4,1fr);  /* 4列表示 */
  gap:12px;  /* 画像同士の間隔 */
  margin-top:16px;  /* メイン画像との間隔 */
}

/* サムネイルボタン */
.thumbnail-carousel_thumb{
  padding:0;  /* 余白なし */
  border:3px solid transparent;  /* 通常時の枠線 */
  border-radius:14px;  /* 角丸 */
  background:none;  /* 背景なし */
  cursor:pointer;  /* カーソル */
  overflow:hidden;  /* 角丸からはみ出しを隠す */
}

/* 選択中のサムネイル */
.thumbnail-carousel_thumb.is-active{
  border-color:#2563eb;  /* 選択中の枠線色 */
}

/* サムネイル画像 */
.thumbnail-carousel_thumb img{
  display:block;  /* 画像下の余白を消す */
  width:100%;  /* 横幅いっぱい */
  height:90px;  /* サムネイルの高さ */
  object-fit:cover;  /* 枠いっぱいにトリミング */
}

/* 画面幅が狭い場合 */
@media(max-width:600px){

  .thumbnail-carousel_demo{
    margin:24px auto;  /* スマホ時の上下余白 */
    padding:16px;  /* スマホ時の外側余白 */
  }

  .thumbnail-carousel_main img{
    height:300px;  /* スマホ時のメイン画像高さ */
  }

  .thumbnail-carousel_thumbs{
    grid-template-columns:repeat(2,1fr);  /* スマホ時は2列表示 */
  }

  .thumbnail-carousel_thumb img{
    height:80px;  /* スマホ時のサムネイル高さ */
  }

}

// メイン画像を取得
const thumbnailCarouselMain = document.getElementById("thumbnail-carousel-main");

// サムネイル一覧を取得
const thumbnailCarouselThumbs = document.querySelectorAll(".thumbnail-carousel_thumb");

// サムネイルを1つずつ処理
thumbnailCarouselThumbs.forEach(function(thumb){

  // サムネイルをクリックした時の処理
  thumb.addEventListener("click", function(){

    // クリックしたサムネイルの data-image の値をメイン画像へ反映
    thumbnailCarouselMain.src = this.dataset.image;

    // すべてのサムネイルから選択中クラスを外す
    thumbnailCarouselThumbs.forEach(function(item){
      item.classList.remove("is-active");
    });

    // クリックしたサムネイルを選択中にする
    this.classList.add("is-active");

  });

});

ファイル構成と設置方法

このサンプルは、HTML・CSS・JavaScriptの3ファイルと画像用フォルダで構成されています。配布用コードにはサンプル画像は含まれていないため、images フォルダはご自身で作成し、その中へ使用したい画像を配置してください。

sample/
├── index.html
├── style.css
├── script.js
└── images/
    ├── slide1.jpg
    ├── slide2.jpg
    ├── slide3.jpg
    └── slide4.jpg

sample フォルダの中に images フォルダを作成し、使用する画像を入れてください。その後、HTML内の images/【配置した画像のファイル名】 を、実際に配置した画像ファイル名へ変更します。例として images/photo1.jpg のように指定すると、images フォルダ内の photo1.jpg が表示されます。