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

画像・画像比率・間隔・角丸・矢印ボタン・ドット・色などを設定して、HTML・CSS・JavaScriptを自動生成できます。

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

HTML・CSS・JavaScriptを使って、中央に表示されている画像を大きく強調するカルーセルを作る方法を紹介します。このサンプルでは複数の画像を横方向に配置し、PCでは中央の画像を大きく、その左右にある画像を少し小さく表示します。左右にも別の画像が見えるため、複数の画像が続いていることを確認しながら順番に閲覧できます。

左右の矢印ボタンをクリックすると、次または前の画像が中央へ移動して強調表示されます。カルーセルの下には画像の枚数に対応したドットを配置し、ドットをクリックして見たい画像へ直接移動することもできます。最後の画像から最初の画像、最初の画像から最後の画像へ移動できるループ構造にすることで、すべての画像を中央の強調位置で確認できます。

商品写真、作品ギャラリー、旅行写真、制作実績など、複数の画像を並べながら注目してほしい画像を中央で目立たせたい場合に利用できます。画面幅640px以下では中央の画像を1枚表示するレイアウトへ切り替え、スマートフォンでも見やすくしています。CSSでは画像の大きさや透明度、影などを設定し、JavaScriptでは中央・左・右に表示する画像の切り替えやループ処理、ドットの現在位置を制御します。

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

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

デモ

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

左右のボタンで画像を送り、中央の画像を大きく表示します。

左右の矢印ボタンまたはドットを操作してください。選択した画像が中央へ移動し、周囲の画像より大きく強調表示されます。

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

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

    <!-- 前の画像を表示するボタン -->
    <button
      class="center-image-carousel_button"
      id="center-image-carousel-prev"
      type="button"
      aria-label="前の画像を表示"
    >

      <!-- 左向きのSVG矢印 -->
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M15 18 9 12l6-6"></path>
      </svg>

    </button>

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

      <!-- 中央・左右へ配置する画像一覧 -->
      <div class="center-image-carousel_track">

        <!--
          使用する画像は利用者自身で用意します。
          sampleフォルダ内にimagesフォルダを作成し、
          image1.pngからimage6.pngまでの画像を配置してください。
        -->

        <!-- 1枚目の画像 -->
        <div class="center-image-carousel_item">
          <img src="images/image1.png" alt="画像1">
        </div>

        <!-- 2枚目の画像 -->
        <div class="center-image-carousel_item">
          <img src="images/image2.png" alt="画像2">
        </div>

        <!-- 3枚目の画像 -->
        <div class="center-image-carousel_item">
          <img src="images/image3.png" alt="画像3">
        </div>

        <!-- 4枚目の画像 -->
        <div class="center-image-carousel_item">
          <img src="images/image4.png" alt="画像4">
        </div>

        <!-- 5枚目の画像 -->
        <div class="center-image-carousel_item">
          <img src="images/image5.png" alt="画像5">
        </div>

        <!-- 6枚目の画像 -->
        <div class="center-image-carousel_item">
          <img src="images/image6.png" alt="画像6">
        </div>

      </div>

    </div>

    <!-- 次の画像を表示するボタン -->
    <button
      class="center-image-carousel_button"
      id="center-image-carousel-next"
      type="button"
      aria-label="次の画像を表示"
    >

      <!-- 右向きのSVG矢印 -->
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="m9 18 6-6-6-6"></path>
      </svg>

    </button>

  </div>

  <!-- 各画像へ直接移動するドット -->
  <div class="center-image-carousel_dots">

    <!-- 1枚目の画像を表示 -->
    <button class="center-image-carousel_dot" type="button" aria-label="1枚目の画像を表示"></button>

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

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

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

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

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

  </div>

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

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* カルーセル内のサイズ計算 */
.center-image-carousel_area,
.center-image-carousel_area *,
.center-image-carousel_dots,
.center-image-carousel_dots *{
  box-sizing:border-box; /* paddingとborderを要素の横幅・高さへ含める */
}

/* カルーセル操作エリア */
.center-image-carousel_area{
  display:flex; /* 左ボタン・画像・右ボタンを横並びにする */
  align-items:center; /* 各要素を上下中央へ揃える */
  width:100%; /* 設置した場所の横幅いっぱいに表示する */
  gap:18px; /* ボタンと画像表示エリアの間隔。値を大きくすると間隔が広がる */
}

/* 左右の操作ボタン */
.center-image-carousel_button{
  display:flex; /* SVG矢印を中央配置する */
  align-items:center; /* SVG矢印を上下中央へ配置する */
  justify-content:center; /* SVG矢印を左右中央へ配置する */
  flex-shrink:0; /* 画面幅が狭くなってもボタンを縮小しない */
  width:48px; /* ボタンの横幅。値を大きくするとボタンが大きくなる */
  height:48px; /* ボタンの高さ。値を大きくするとボタンが大きくなる */
  padding:0; /* ブラウザ標準の内側余白を削除 */
  border:none; /* ブラウザ標準の枠線を削除 */
  border-radius:50%; /* 50%でボタンを円形にする */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* SVG矢印の色 */
  cursor:pointer; /* マウスを重ねたときに指の形へ変更 */
}

/* SVG矢印 */
.center-image-carousel_button svg{
  width:24px; /* SVGの横幅。値を大きくすると矢印が大きくなる */
  height:24px; /* SVGの高さ。値を大きくすると矢印が大きくなる */
  fill:none; /* SVG内部を塗りつぶさない */
  stroke:currentColor; /* ボタンの文字色を矢印の線色として使用 */
  stroke-width:2; /* 矢印の線幅。値を大きくすると線が太くなる */
  stroke-linecap:round; /* 線の端を丸くする */
  stroke-linejoin:round; /* 線の接続部分を丸くする */
}

/* 画像表示エリア */
.center-image-carousel_view{
  flex:1; /* 左右ボタン以外の残りの横幅を使用 */
  min-width:0; /* 内容によって横幅が必要以上に広がるのを防ぐ */
  overflow:hidden; /* 表示範囲からはみ出した画像を非表示 */
  padding:24px 0; /* 上下24pxの余白を確保して中央画像の拡大分を表示 */
}

/* 画像を配置する領域 */
.center-image-carousel_track{
  position:relative; /* 各画像の絶対配置の基準にする */
  height:220px; /* 表示領域の高さ。値を大きくすると画像を配置できる縦方向の範囲が広がる */
}

/* 各画像 */
.center-image-carousel_item{
  position:absolute; /* 各画像を中央基準で自由に配置 */
  top:50%; /* 表示領域の縦中央を基準位置にする */
  left:50%; /* 表示領域の横中央を基準位置にする */
  width:31%; /* 通常時の画像横幅。値を大きくすると画像が横に広がる */
  height:190px; /* 通常時の画像高さ。値を大きくすると画像が縦に高くなる */
  overflow:hidden; /* 角丸からはみ出した画像を非表示 */
  border:1px solid #dbe4f3; /* 画像を囲む枠線。1pxを大きくすると線が太くなる */
  border-radius:16px; /* 画像の角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 画像枠の背景色 */
  opacity:0; /* 通常状態では画像を非表示 */
  transform:translate(-50%,-50%) scale(.82); /* 中央を基準に配置し82%へ縮小 */
  transition:
    transform .3s ease, /* 0.3秒で位置と大きさを変更 */
    opacity .3s ease, /* 0.3秒で透明度を変更 */
    box-shadow .3s ease; /* 0.3秒で影を変更 */
  z-index:0; /* 通常状態の重なり順 */
  pointer-events:none; /* 非表示画像へのマウス操作を無効化 */
}

/* 画像本体 */
.center-image-carousel_item img{
  display:block; /* 画像下部に発生する余白を削除 */
  width:100%; /* 画像枠の横幅いっぱいに表示 */
  height:100%; /* 画像枠の高さいっぱいに表示 */
  object-fit:cover; /* 縦横比を保ちながら画像枠全体を埋める */
}

/* 中央より左側の画像 */
.center-image-carousel_item.is-left{
  opacity:.6; /* 60%の不透明度にして中央画像より控えめに表示 */
  transform:translate(calc(-50% - 108%),-50%) scale(.88); /* 左へ移動して88%へ縮小 */
  z-index:1; /* 通常状態より前面へ表示 */
  pointer-events:auto; /* 表示画像へのマウス操作を有効化 */
}

/* 中央の画像 */
.center-image-carousel_item.is-center{
  opacity:1; /* 完全に表示 */
  transform:translate(-50%,-50%) scale(1.08); /* 中央で108%へ拡大 */
  box-shadow:0 14px 30px rgba(15,23,42,.18); /* 中央画像へ影を付けて強調 */
  z-index:3; /* 左右画像より前面へ表示 */
  pointer-events:auto; /* 表示画像へのマウス操作を有効化 */
}

/* 中央より右側の画像 */
.center-image-carousel_item.is-right{
  opacity:.6; /* 60%の不透明度にして中央画像より控えめに表示 */
  transform:translate(calc(-50% + 108%),-50%) scale(.88); /* 右へ移動して88%へ縮小 */
  z-index:1; /* 通常状態より前面へ表示 */
  pointer-events:auto; /* 表示画像へのマウス操作を有効化 */
}

/* 左側へ退避する画像 */
.center-image-carousel_item.is-hidden-left{
  opacity:0; /* 画像を透明にする */
  transform:translate(calc(-50% - 216%),-50%) scale(.82); /* 左側の表示範囲外へ移動 */
  z-index:0; /* 表示画像より後ろへ配置 */
}

/* 右側へ退避する画像 */
.center-image-carousel_item.is-hidden-right{
  opacity:0; /* 画像を透明にする */
  transform:translate(calc(-50% + 216%),-50%) scale(.82); /* 右側の表示範囲外へ移動 */
  z-index:0; /* 表示画像より後ろへ配置 */
}

/* 現在位置を示すドット */
.center-image-carousel_dots{
  display:flex; /* ドットを横並びにする */
  justify-content:center; /* ドットを左右中央へ配置 */
  gap:10px; /* ドット同士の間隔。値を大きくすると間隔が広がる */
  margin-top:24px; /* 画像との間隔。値を大きくするとドットが下へ離れる */
}

/* 各ドット */
.center-image-carousel_dot{
  width:12px; /* ドットの横幅。値を大きくするとドットが大きくなる */
  height:12px; /* ドットの高さ。値を大きくするとドットが大きくなる */
  padding:0; /* ブラウザ標準の内側余白を削除 */
  border:none; /* ブラウザ標準の枠線を削除 */
  border-radius:50%; /* 50%でドットを円形にする */
  background:#cbd5e1; /* 通常時のドットの背景色 */
  cursor:pointer; /* マウスを重ねたときに指の形へ変更 */
}

/* 現在位置のドット */
.center-image-carousel_dot.is-active{
  background:#2563eb; /* 現在位置のドットの背景色 */
}

/* 画面幅640px以下 */
@media(max-width:640px){

  /* ページ全体 */
  body{
    padding:24px 12px; /* 上下24px・左右12pxへ余白を小さくする */
  }

  /* カルーセル操作エリア */
  .center-image-carousel_area{
    gap:8px; /* ボタンと画像表示エリアの間隔を8pxへ小さくする */
  }

  /* 左右の操作ボタン */
  .center-image-carousel_button{
    width:42px; /* スマートフォンでのボタン横幅 */
    height:42px; /* スマートフォンでのボタン高さ */
  }

  /* SVG矢印 */
  .center-image-carousel_button svg{
    width:22px; /* スマートフォンでのSVG横幅 */
    height:22px; /* スマートフォンでのSVG高さ */
  }

  /* 画像表示エリア */
  .center-image-carousel_view{
    padding:0; /* スマートフォンでは上下の追加余白を削除 */
  }

  /* 画像を配置する領域 */
  .center-image-carousel_track{
    height:220px; /* スマートフォンでの表示領域の高さ */
  }

  /* 各画像 */
  .center-image-carousel_item{
    width:100%; /* スマートフォンでは表示領域いっぱいの横幅にする */
    height:220px; /* スマートフォンでの画像高さ */
    transform:translate(-50%,-50%) scale(1); /* 拡大縮小せず中央へ配置 */
  }

  /* 中央以外の画像 */
  .center-image-carousel_item.is-left,
  .center-image-carousel_item.is-right,
  .center-image-carousel_item.is-hidden-left,
  .center-image-carousel_item.is-hidden-right{
    opacity:0; /* 中央以外の画像を非表示 */
    transform:translate(-50%,-50%) scale(1); /* 中央位置を基準に非表示 */
    pointer-events:none; /* 非表示画像へのマウス操作を無効化 */
  }

  /* 中央の画像 */
  .center-image-carousel_item.is-center{
    transform:translate(-50%,-50%) scale(1); /* スマートフォンでは拡大せず表示 */
  }

}

/* カルーセル操作エリアを取得 */
const centerImageCarouselArea =
  document.querySelector(".center-image-carousel_area");

/* すべての画像を取得 */
const centerImageCarouselItems =
  centerImageCarouselArea.querySelectorAll(".center-image-carousel_item");

/* 前へボタンを取得 */
const centerImageCarouselPrev =
  centerImageCarouselArea.querySelector("#center-image-carousel-prev");

/* 次へボタンを取得 */
const centerImageCarouselNext =
  centerImageCarouselArea.querySelector("#center-image-carousel-next");

/* すべてのドットを取得 */
const centerImageCarouselDots =
  document.querySelectorAll(".center-image-carousel_dot");

/* 現在中央へ表示している画像番号。0は1枚目 */
let centerImageCarouselCurrent = 0;

/* 画像の表示位置とドットを更新 */
function centerImageCarouselDraw(){

  /* 画像の総数を取得 */
  const centerImageCarouselTotal =
    centerImageCarouselItems.length;

  /*
    中央画像の1つ前を左側画像として計算する。
    1を変更すると中央から何枚前を左側へ表示するかが変わる。
  */
  const centerImageCarouselLeft =
    (
      centerImageCarouselCurrent -
      1 +
      centerImageCarouselTotal
    ) %
    centerImageCarouselTotal;

  /*
    中央画像の1つ後を右側画像として計算する。
    1を変更すると中央から何枚後を右側へ表示するかが変わる。
  */
  const centerImageCarouselRight =
    (
      centerImageCarouselCurrent +
      1
    ) %
    centerImageCarouselTotal;

  /* すべての画像へ表示位置に応じたクラスを設定 */
  centerImageCarouselItems.forEach(function(item,index){

    /* 位置クラスを初期状態へ戻す */
    item.className = "center-image-carousel_item";

    /* 現在選択中の画像を中央へ配置 */
    if(index === centerImageCarouselCurrent){

      item.classList.add("is-center");

    /* 1つ前の画像を左側へ配置 */
    }else if(index === centerImageCarouselLeft){

      item.classList.add("is-left");

    /* 1つ後の画像を右側へ配置 */
    }else if(index === centerImageCarouselRight){

      item.classList.add("is-right");

    }else{

      /* 現在位置から各画像までの循環距離を計算 */
      const centerImageCarouselDistance =
        (
          index -
          centerImageCarouselCurrent +
          centerImageCarouselTotal
        ) %
        centerImageCarouselTotal;

      /*
        総画像数の半分より遠い画像は左側へ退避し、
        それ以外の画像は右側へ退避する。
      */
      if(
        centerImageCarouselDistance >
        centerImageCarouselTotal / 2
      ){

        item.classList.add("is-hidden-left");

      }else{

        item.classList.add("is-hidden-right");

      }

    }

  });

  /* 現在中央にある画像と同じ位置のドットを有効にする */
  centerImageCarouselDots.forEach(function(dot,index){

    dot.classList.toggle(
      "is-active",
      index === centerImageCarouselCurrent
    );

  });

}

/* 次へボタンをクリックしたとき */
centerImageCarouselNext.addEventListener("click", function(){

  /*
    現在位置を1つ進める。
    最後の画像の次では余りを利用して1枚目へ戻る。
  */
  centerImageCarouselCurrent =
    (
      centerImageCarouselCurrent +
      1
    ) %
    centerImageCarouselItems.length;

  /* 表示位置を更新 */
  centerImageCarouselDraw();

});

/* 前へボタンをクリックしたとき */
centerImageCarouselPrev.addEventListener("click", function(){

  /*
    現在位置を1つ戻す。
    1枚目の前では最後の画像へ移動する。
  */
  centerImageCarouselCurrent =
    (
      centerImageCarouselCurrent -
      1 +
      centerImageCarouselItems.length
    ) %
    centerImageCarouselItems.length;

  /* 表示位置を更新 */
  centerImageCarouselDraw();

});

/* 各ドットへクリック処理を設定 */
centerImageCarouselDots.forEach(function(dot,index){

  dot.addEventListener("click", function(){

    /* クリックしたドットと同じ番号の画像を中央へ設定 */
    centerImageCarouselCurrent = index;

    /* 表示位置を更新 */
    centerImageCarouselDraw();

  });

});

/* ページを開いたときの表示位置を設定 */
centerImageCarouselDraw();

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

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

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptと6枚のPNG画像で構成されています。HTMLでは左右の操作ボタン、6つの画像項目、各画像へ直接移動するドットを配置します。CSSでは中央の画像を大きく表示し、その左右に1枚ずつ小さな画像を配置するレイアウトや、操作ボタン、ドット、切り替えアニメーションなどを設定します。JavaScriptでは現在中央に表示している画像を管理し、左右のボタンやドットを操作したときに画像の表示位置を切り替えます。最後の画像から最初の画像、最初の画像から最後の画像へつながる循環動作にも対応しています。画像は利用者自身で用意し、sampleフォルダ内のimagesフォルダへ配置します。

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

各ファイルの役割
index.htmlはカルーセルを構成するファイルです。前の画像へ戻る操作ボタン、次の画像へ進む操作ボタン、6つのcenter-image-carousel_item、各画像へ直接移動する6つのcenter-image-carousel_dotを配置しています。画像はimages/image1.pngからimages/image6.pngまでを参照します。画像のファイル名や代替テキストを変更する場合もindex.htmlを編集します。

style.cssはカルーセルのレイアウトとデザインを設定するファイルです。中央の画像を大きく表示し、その左右へ1枚ずつ小さな画像を配置します。左右の画像は透明度を下げることで中央画像との差を付け、現在選択している画像を分かりやすくします。左右の操作ボタン、画像の大きさ・高さ・位置・角丸・影、切り替えアニメーション、ドットなどもこのファイルで設定します。

script.jsはカルーセルの切り替えを制御するファイルです。現在選択している画像を中央、その1つ前の画像を左、その1つ後の画像を右へ配置します。左右の操作ボタンでは1枚ずつ画像を切り替え、最後の画像から次へ進むと1枚目へ、1枚目から前へ戻ると最後の画像へ移動します。ドットをクリックした場合は、対応する画像を直接中央へ表示します。

imagesフォルダにはカルーセルで使用する画像を配置します。このサンプルではimage1.png、image2.png、image3.png、image4.png、image5.png、image6.pngの6枚のPNG画像を使用します。画像ファイルは利用者自身で用意してください。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、同じsampleフォルダ内へimagesフォルダを作成します。利用者自身で用意した6枚のPNG画像をimage1.png、image2.png、image3.png、image4.png、image5.png、image6.pngというファイル名でimagesフォルダへ配置してください。別のファイル名を使用する場合は、index.htmlの各img要素にあるsrcを実際の画像パスへ変更します。

すべてのファイルと画像を配置したあと、sample/index.htmlをブラウザで開きます。index.htmlから同じ階層のstyle.cssとscript.jsを読み込み、imagesフォルダ内の画像を使用してカルーセルを表示します。左右の操作ボタンをクリックすると画像を1枚ずつ切り替えられ、下部のドットをクリックすると対応する画像を直接中央へ表示できます。

カスタマイズできる内容
index.htmlではカルーセルに表示する画像を変更できます。各img要素のsrcを使用する画像のパスへ変更し、altも画像の内容に合わせて変更してください。画像を追加または削除する場合は、center-image-carousel_itemとcenter-image-carousel_dotの数を合わせて変更します。

style.cssでは中央と左右の画像サイズ、画像の高さ、透明度、横方向の位置、角丸、中央画像の拡大率や影、操作ボタンやドットの大きさ、切り替えアニメーションの時間などを変更できます。外側を囲む固定フレームや最大横幅は設けておらず、center-image-carousel_areaのwidth:100%;によって設置した場所の横幅に合わせて表示されます。画像にはobject-fit:cover;を使用しているため、指定した画像領域を埋めるように表示され、元画像の縦横比によっては上下または左右の一部が切り取られます。

640pxより大きい画面では中央画像と左右の画像を合わせた3枚を表示し、640px以下では中央画像だけを1枚表示します。表示方法は画面幅に応じてCSSで切り替わりますが、左右の操作ボタンとドットによる操作方法は共通です。

数値調整
style.css
padding:40px 20px;
ページ全体の内側余白です。40pxは上下、20pxは左右の余白です。値を大きくすると画面端との間隔が広がり、小さくすると狭くなります。

width:100%;
カルーセル操作エリアの横幅です。100%では設置した親要素の横幅いっぱいに表示されます。

gap:18px;
左右の操作ボタンと画像表示エリアの間隔です。値を大きくすると間隔が広がり、小さくすると狭くなります。

width:48px;・height:48px;
左右の操作ボタンの横幅と高さです。値を大きくするとボタンが大きくなり、小さくすると小さくなります。

padding:0;
操作ボタンに追加する内側余白です。0では追加の余白を付けません。値を大きくするとボタン内部の余白が増えます。

border-radius:50%;
操作ボタンの角丸です。横幅と高さが同じ状態で50%を指定することで円形になります。値を小さくすると丸みが弱くなります。

width:24px;・height:24px;
操作ボタン内に表示するSVG矢印の横幅と高さです。値を大きくすると矢印が大きくなり、小さくすると小さくなります。

stroke-width:2;
SVG矢印の線の太さです。値を大きくすると線が太くなり、小さくすると細くなります。

padding:24px 0;
画像表示エリアの上下余白です。中央画像を拡大したときに上下が切れないように余白を確保しています。24pxを大きくすると上下の空間が広がり、小さくすると狭くなります。

height:220px;
画像を配置する領域の高さです。値を大きくすると画像表示エリアが高くなり、小さくすると低くなります。

top:50%;・left:50%;
各画像を配置するときの基準位置です。上端と左端から50%の位置を基準にすることで、画像表示エリアの中央を基準として配置します。値を変更すると画像全体の基準位置が上下左右へ移動します。

width:31%;
640pxより大きい画面で使用する各画像の基本横幅です。値を大きくすると画像が横に広がり、小さくすると狭くなります。

height:190px;
640pxより大きい画面で使用する各画像の高さです。値を大きくすると画像が高くなり、小さくすると低くなります。

border:1px solid #dbe4f3;
各画像を囲む枠線です。1pxは線の太さです。値を大きくすると枠線が太くなり、小さくすると細くなります。

border-radius:16px;
各画像の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

scale(.82)
中央・左・右の表示位置から外れた画像に使用する大きさです。.82は元の82%の大きさを表します。値を1へ近づけると元の大きさに近づき、小さくするとさらに縮小されます。

transition:.3s
画像の位置・大きさ・透明度・影などが切り替わる時間です。.3sは0.3秒を表します。値を大きくするとゆっくり変化し、小さくすると速く変化します。

opacity:.6;
左右に表示する画像の透明度です。.6では60%の不透明度で表示します。1へ近づけると濃く表示され、0へ近づけると透明になります。

translate(calc(-50% - 108%),-50%)・translate(calc(-50% + 108%),-50%)
左右の画像を中央から移動させる位置です。108%を大きくすると中央画像から離れ、小さくすると中央画像へ近づきます。

scale(.88)
左右に表示する画像の大きさです。.88は元の88%の大きさを表します。値を大きくすると中央画像との大きさの差が小さくなり、小さくすると左右画像がさらに小さくなります。

scale(1.08)
中央画像の拡大率です。1.08は元の108%の大きさを表します。値を大きくすると中央画像がさらに強調され、1へ近づけると元の大きさになります。

box-shadow:0 14px 30px rgba(15,23,42,.18);
中央画像の影です。14pxは縦方向の位置、30pxはぼかしの大きさ、.18は影の透明度です。それぞれの値を変更することで影の位置・広がり・濃さを調整できます。

translate(calc(-50% - 216%),-50%)・translate(calc(-50% + 216%),-50%)
中央・左・右の表示位置から外れた画像を左右へ移動する距離です。216%を大きくすると画像をさらに外側へ移動でき、小さくすると中央へ近づきます。

gap:10px;
ドット同士の間隔です。値を大きくするとドット同士が離れ、小さくすると近くなります。

margin-top:24px;
画像表示エリアとドットの間隔です。値を大きくすると上下の間隔が広がり、小さくすると狭くなります。

width:12px;・height:12px;
各ドットの横幅と高さです。値を大きくするとドットが大きくなり、小さくすると小さくなります。

padding:0;
ドットに追加する内側余白です。0では追加の余白を付けません。値を大きくするとドット内部の余白が増えます。

border-radius:50%;
ドットの角丸です。横幅と高さが同じ状態で50%を指定することで円形になります。値を小さくすると丸みが弱くなります。

@media (max-width:640px)
1枚表示へ切り替える基準となる画面幅です。640px以下になると、ページ全体の余白、操作ボタンと画像表示エリアの間隔、操作ボタン、SVG矢印、画像サイズなどをスマートフォン向けへ変更します。

padding:24px 12px;
640px以下で使用するページ全体の内側余白です。24pxは上下、12pxは左右の余白です。値を大きくすると画面端との間隔が広がり、小さくすると狭くなります。

gap:8px;
640px以下で使用する左右の操作ボタンと画像表示エリアの間隔です。PC表示の18pxより狭くして、画像を表示する横幅を確保します。

width:42px;・height:42px;
640px以下で使用する左右の操作ボタンの横幅と高さです。PC表示の48pxより小さくします。

width:22px;・height:22px;
640px以下で使用するSVG矢印の横幅と高さです。PC表示の24pxより小さくします。

padding:0;
640px以下で画像表示エリアの追加余白をなくす指定です。PC表示で設定している上下24pxの余白を取り除き、1枚の画像を表示する領域を確保します。

height:220px;
640px以下で使用する画像配置領域と各画像の高さです。値を大きくすると画像が高くなり、小さくすると低くなります。

width:100%;
640px以下で中央画像を画像表示エリアの横幅いっぱいに表示する指定です。

opacity:0;
640px以下で中央以外の画像を非表示にする指定です。0では完全に透明になります。

scale(1)
640px以下で中央画像を元の大きさで表示する指定です。PC表示で使用するscale(1.08)による拡大を解除します。

script.js
centerImageCarouselCurrent = 0;
最初に中央へ表示する画像番号です。JavaScriptでは0が1枚目を表すため、初期状態では1枚目の画像が中央に表示されます。

1
現在の画像から左右へ何枚離れた画像を表示するかを判定するときに使用する値です。現在は1つ前の画像を左側、1つ後の画像を右側へ表示します。

centerImageCarouselTotal / 2
中央・左・右の表示対象から外れた画像を左側と右側のどちらへ配置するかを決める基準です。画像総数の半分を境界として、現在位置から見た循環方向を判定します。

レスポンシブ対応
このサンプルはレスポンシブ対応です。カルーセル操作エリアにはwidth:100%;を指定しているため、外側を囲む固定フレームや最大横幅を設けず、設置した親要素の横幅に合わせて表示されます。640pxより大きい画面では、現在選択している画像を中央へ大きく表示し、その1つ前と1つ後の画像を左右へ小さく表示する3枚構成になります。中央画像にはscale(1.08)と影を設定し、左右画像にはscale(.88)とopacity:.6;を使用して中央画像を強調します。

画面幅640px以下では@media (max-width:640px)を使用し、ページ全体の内側余白を24px 12px、左右の操作ボタンと画像表示エリアの間隔を8pxへ変更します。操作ボタンは42px四方、SVG矢印は22px四方へ縮小し、画像表示エリアの追加余白を0にします。画像配置領域と画像の高さは220px、画像の横幅は100%へ変更します。中央以外の画像はopacity:0;で見えない状態にし、中央画像もscale(1)へ変更するため、640px以下では中央画像だけを1枚表示します。左右の操作ボタンとドットによる循環操作はPC表示と共通で、スマートフォン・タブレット・PCの画面幅に合わせて利用できます。