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

カルーセル

中央の画像を強調表示するカルーセルを作る方法

中央の画像を強調表示するカルーセルをHTML・CSS・JavaScriptで作る方法を紹介します。1画面に複数の画像を横並びで表示し、その中でも中央にある画像だけを少し大きく、前面に出ているように見せるカルーセルです。商品画像、ギャラリー、特集バナー、コーディネート紹介など、注目させたい画像を分かりやすく見せたい場面に向いています。

このサンプルでは、6枚の画像を用意し、表示位置に応じて中央の画像へ強調用クラスを付け替えます。中央の画像は拡大表示し、影を少し強くすることで、左右の画像より目立つ見た目になります。前へ・次へボタンをクリックすると画像が横へ移動し、中央に来た画像が自動的に強調されます。

1枚ずつ切り替えるカルーセルよりも、複数の画像を比較しながら見せられるため、商品一覧や作品一覧などにも使いやすい構成です。画像ファイルを差し替えるだけで利用でき、CSSの拡大率や影の強さを変更することで、中央画像の目立たせ方も調整できます。

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

デモ

画像1
画像2
画像3
画像4
画像5
画像6

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

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

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

      <!-- 画像を重ねて配置するエリア -->
      <div class="center-image-carousel_track">

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

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

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

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

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

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

      </div>

    </div>

    <!-- 前へ・次へボタン -->
    <div class="center-image-carousel_buttons">

      <!-- 前へボタン -->
      <button type="button" id="center-image-carousel-prev" aria-label="前へ">
        前へ
      </button>

      <!-- 次へボタン -->
      <button type="button" id="center-image-carousel-next" aria-label="次へ">
        次へ
      </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.jpg
    ├── 画像2.jpg
    ├── 画像3.jpg
    ├── 画像4.jpg
    ├── 画像5.jpg
    └── 画像6.jpg

sample/index.htmlをブラウザで開くと動作を確認できます。画像はsample/images/へ配置し、index.html内の画像ファイル名を配置した画像名へ変更してください。画像を増減する場合はHTMLの画像ブロックを追加・削除することで対応できます。中央画像の大きさはstyle.cssのtransform: scale(1.08);、左右画像の大きさはtransform: scale(.88);で変更できます。数値を大きくすると中央画像がより強調され、小さくすると左右との差が少なくなります。また、スライド速度はstyle.cssのtransition: transform .55s ease;で変更できます。.55sを大きくするとゆっくり、小さくすると速く切り替わります。画像の高さはheight:240px;、カルーセル全体の高さはheight:280px;を変更することで調整できます。

コメント