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

スライダー

3D表示で中央の画像を強調するスライダーを作る方法

3D表示で中央の画像を強調するスライダーを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用して、中央の画像を大きく表示し、左右の画像を斜めに配置することで立体感のあるスライダーを実装します。左右のボタンをクリックすると画像が1枚ずつ切り替わり、中央へ移動した画像が強調表示されるため、視線を自然に誘導できるデザインを簡単に作成できます。

商品紹介ページのメインビジュアル、制作実績やポートフォリオ、旅行・観光サイトの写真一覧、不動産サイトの物件紹介、キャンペーンページのキービジュアルなど、画像を印象的に見せたい場面で活用できます。左右の画像は少し小さく3D表示されるため、現在表示している画像が分かりやすく、シンプルなスライダーよりも視覚的なインパクトを与えられます。

HTMLでは表示する画像を自由に差し替えることができ、CSSでは画像サイズ、3D回転角度、拡大率、余白、影、角丸などを用途に合わせて変更できます。JavaScriptでは前後の画像切り替えを制御しており、レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用しやすい3D画像スライダーのサンプルとして活用できます。

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

デモ

山と湖の風景
犬の写真
滝の風景
岩山の風景
海辺の風景
森林の風景

前へ・次へボタンまたはドットをクリックすると、横長画像が無限ループで切り替わり、中央画像が強調表示されます。

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

<!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-slider_demo">

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

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

        <!-- 画像1 -->
        <div class="three-d-center-image-slider_slide">
          <img src="images/image1.jpg" alt="山と湖の風景">
        </div>

        <!-- 画像2 -->
        <div class="three-d-center-image-slider_slide">
          <img src="images/image2.jpg" alt="犬の写真">
        </div>

        <!-- 画像3 -->
        <div class="three-d-center-image-slider_slide">
          <img src="images/image3.jpg" alt="滝の風景">
        </div>

        <!-- 画像4 -->
        <div class="three-d-center-image-slider_slide">
          <img src="images/image4.jpg" alt="岩山の風景">
        </div>

        <!-- 画像5 -->
        <div class="three-d-center-image-slider_slide">
          <img src="images/image5.jpg" alt="海辺の風景">
        </div>

        <!-- 画像6 -->
        <div class="three-d-center-image-slider_slide">
          <img src="images/image6.jpg" alt="森林の風景">
        </div>

      </div>

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

        <!-- 前へボタン -->
        <button
          class="three-d-center-image-slider_prev"
          type="button"
          aria-label="前の画像">
          前へ
        </button>

        <!-- 次へボタン -->
        <button
          class="three-d-center-image-slider_next"
          type="button"
          aria-label="次の画像">
          次へ
        </button>

      </div>

    </div>

    <!-- 画像位置を示すドット -->
    <div class="three-d-center-image-slider_dots">

      <button class="three-d-center-image-slider_dot is-active" type="button" aria-label="1枚目の画像を表示"></button>

      <button class="three-d-center-image-slider_dot" type="button" aria-label="2枚目の画像を表示"></button>

      <button class="three-d-center-image-slider_dot" type="button" aria-label="3枚目の画像を表示"></button>

      <button class="three-d-center-image-slider_dot" type="button" aria-label="4枚目の画像を表示"></button>

      <button class="three-d-center-image-slider_dot" type="button" aria-label="5枚目の画像を表示"></button>

      <button class="three-d-center-image-slider_dot" type="button" aria-label="6枚目の画像を表示"></button>

    </div>

  </div>

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

</body>
</html>
コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは画像スライダー全体と画像、前へ・次へボタン、ドットナビゲーションを配置し、CSSでは3D表示や中央画像の強調表示、レスポンシブデザインを設定します。JavaScriptでは現在表示中の画像を管理し、左右ボタンやドットクリックに合わせて表示位置を切り替えます。 

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

各ファイルの役割
index.htmlはスライダー全体を構成するファイルです。表示する画像、前へ・次へボタン、ドットナビゲーションを変更できます。

style.cssはスライダーのデザインを設定するファイルです。画像サイズ、3D回転角度、中央画像の拡大率、影、ボタン、ドット、レスポンシブ表示などを変更できます。

script.jsはスライダーの動作を制御するファイルです。左右ボタンやドットクリック時の切り替え処理、中央・左右・待機画像の表示状態を管理します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、使用する画像をimagesフォルダへ保存します。HTML内の画像ファイル名を実際のファイル名へ変更したあと、sample/index.htmlをブラウザで開いてください。左右のボタンまたはドットをクリックすると、中央画像を強調した3Dスライダーを操作できます。

カスタマイズできる内容
index.htmlでは画像ファイル、alt属性、画像枚数を変更できます。

style.cssでは画像の横幅・高さ、3D回転角度、中央画像の拡大率、影、角丸、背景色、ボタン、ドット、アニメーション速度などを用途に合わせて調整できます。

script.jsでは初期表示位置やドット・ボタンによる切り替え処理を変更できます。

数値調整
style.css
max-width:980px;
スライダー全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。

width:40%;
各画像の横幅です。値を大きくすると中央画像・左右画像とも大きく表示されます。

height:200px;
画像の高さです。値を変更すると表示される画像の縦サイズが変わります。

rotateY(45deg)
左右画像の3D回転角度です。値を大きくすると立体感が強くなり、小さくすると正面に近い表示になります。

scale(1.08)
中央画像の拡大率です。値を大きくすると中央画像がより強調され、小さくすると控えめになります。

transition:.55s;
スライド切り替え時間です。値を大きくするとゆっくり、小さくすると素早く切り替わります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssではmedia queryを使用し、768px以下では画像サイズや3D表示を調整し、600px以下では中央画像のみを表示するレイアウトへ切り替えています。そのため、スマートフォン・タブレット・PCでも見やすく利用できます。

こちらもおすすめ

スライダー
スライダーのサンプルコード一覧

この記事の他にも、コピペですぐ使える実用的なサンプルコードを掲載しています。デモを確認しながら、用途に合うコードを探せます。

その他のコードを探す
トップページ
コピペですぐ使えるサンプルコードを探す

実用的なサンプルコードをカテゴリ・新着記事・人気記事から探せます。用途に合ったコードを見つけて、そのままコピペで利用できます。

トップページで探す！

コメント