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

スライダー

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

サムネイル画像をクリックして切り替えるカルーセルをHTML・CSS・JavaScriptで作る方法を紹介します。メイン画像の下にサムネイル一覧を表示し、見たい画像をクリックするだけでメイン画像を切り替えられるシンプルなカルーセルです。

このサンプルでは、サムネイルを選択すると対応する画像が大きく表示され、現在選択しているサムネイルも分かりやすく強調表示されます。商品紹介ページや写真ギャラリー、作品一覧など、複数の画像を見やすく表示したい場面で利用できます。

表示する画像は自由に差し替えることができ、画像枚数の追加にも対応しやすい構成になっています。ライブラリを使用せずに実装しているため、サムネイル付きカルーセルの基本的な仕組みを学びたい方にもおすすめです。

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

デモ

下のサムネイル画像をクリックすると、対応する画像がメイン表示へ切り替わります。選択中のサムネイルには青い枠線が表示されます。

メイン画像
画像1
画像2
画像3

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

<!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">
      <img id="thumbnail-carousel-main" src="images/【ここに1枚目の画像ファイル名】" alt="メイン画像">
    </div>

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

      <!-- サムネイル1 -->
      <button class="thumbnail-carousel_item is-active" type="button" data-image="images/【ここに1枚目の画像ファイル名】">
        <img src="images/【ここに1枚目の画像ファイル名】" alt="画像1">
      </button>

      <!-- サムネイル2 -->
      <button class="thumbnail-carousel_item" type="button" data-image="images/【ここに2枚目の画像ファイル名】">
        <img src="images/【ここに2枚目の画像ファイル名】" alt="画像2">
      </button>

      <!-- サムネイル3 -->
      <button class="thumbnail-carousel_item" type="button" data-image="images/【ここに3枚目の画像ファイル名】">
        <img src="images/【ここに3枚目の画像ファイル名】" alt="画像3">
      </button>

    </div>

  </div>

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

</body>
</html>

ファイル構成と設置方法

このサンプルは、HTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでメイン画像とサムネイル一覧を配置し、CSSでレイアウトや選択中サムネイルのデザインを設定し、JavaScriptでサムネイルをクリックした際にメイン画像を切り替える処理を実装しています。表示する画像は sample/images/ フォルダへ配置して使用します。 

sample/
├── index.html
├── style.css
├── script.js
└── images/
    ├── 【ここに1枚目の画像】
    ├── 【ここに2枚目の画像】
    └── 【ここに3枚目の画像】

sampleフォルダをそのまま配置し、ブラウザで sample/index.html を開くと動作を確認できます。使用する画像は sample/images/ フォルダへ配置し、index.html の各 img タグおよび data-image 属性へ画像ファイル名を指定してください。サムネイルをクリックすると、対応する画像がメイン表示へ切り替わります。

メイン画像の横幅やサムネイルサイズ、余白、角丸、枠線などのデザインは style.css で変更できます。サムネイル選択時の枠線色も style.css の .thumbnail-carousel_item.is-active で変更できます。画像の切り替え処理や選択状態の変更は script.js にまとめられているため、画像枚数を追加する場合も同じ構成で拡張できます。

コメント