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

カルーセル

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

3D版 中央の画像を強調表示するカルーセルをHTML・CSS・JavaScriptで作る方法を紹介します。1画面に3枚の画像を表示し、中央の画像を大きく見せながら、左右の画像を内側へ傾けて立体感を出すカルーセルです。通常の横並びカルーセルよりも奥行きのある見た目になり、商品画像やギャラリー、特集バナーなどを印象的に見せたい場面で利用できます。

このサンプルでは、中央の画像を拡大表示し、左右の画像には3D回転を加えて内側を向いているように見せます。さらに、左右の画像には白い半透明のベールを重ねることで、中央の画像がより目立つ構成にしています。JavaScriptでは現在の画像番号を管理し、前へ・次へボタンをクリックすると中央画像が切り替わります。

画像は6枚を想定しており、最後の画像から最初の画像へ、最初の画像から最後の画像へも自然に切り替わる構成です。CSSの回転角度や拡大率、透明度を調整することで、3D感や中央画像の強調具合を変更できます。立体感のあるカルーセルを作りたい方におすすめのサンプルです。

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

デモ

画像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>3D版 中央の画像を強調表示するカルーセル</title>

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

</head>
<body>

  <!-- 3Dカルーセル全体 -->
  <div class="three-d-center-image-carousel_demo">

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

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

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

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

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

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

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

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

      </div>

    </div>

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

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

      <!-- 次へボタン -->
      <button type="button" id="three-d-center-image-carousel-next" aria-label="次へ">
        次へ
      </button>

    </div>

  </div>

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

</body>
</html>

ファイル構成と設置方法

このサンプルは、HTML・CSS・JavaScriptを分離した構成です。HTMLでカルーセルのレイアウトを作成し、CSSで3D風の見た目やアニメーションを設定、JavaScriptで左右ボタンによる画像の切り替え処理を行います。表示する画像は images フォルダへ配置し、index.html の画像パスを書き換えるだけで利用できます。 

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

sample フォルダ内の index.html をブラウザで開くとカルーセルを確認できます。表示する画像は sample/images/ に配置し、index.html の画像ファイル名を実際の画像に合わせて変更してください。3Dの傾きや画像サイズは style.css の rotateY()、scale()、width、height を変更すると調整できます。画像切り替え速度は style.css の transition: .55s（0.55秒）を変更すると、値を大きくするとゆっくり、小さくすると速く切り替わります。

コメント