中央の画像を大きく表示するカルーセルを作る方法
中央の画像を大きく表示するカルーセルを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用して、複数の画像を横方向に並べながら、現在選択されている画像だけを中央で大きく表示するカルーセルを作成します。左右には前後の画像を少し小さく表示するため、次にどの画像が表示されるのかを確認しながら操作できます。
前へ・次へボタンをクリックすると、中央の画像が順番に切り替わり、それまで中央に表示されていた画像は左右へ移動します。最後の画像まで進んだ場合は最初の画像へ戻り、最初の画像から前へ進んだ場合は最後の画像へ移動するため、画像を繰り返し切り替えられます。商品写真、作品紹介、旅行写真、施設案内、ポートフォリオなど、複数の画像を見せながら現在の画像を強調したい場面に利用できます。
CSSでは中央画像の大きさ、左右画像の縮小率、透明度、画像の横幅、高さ、角丸、影、切り替え時間、前へ・次へボタンのサイズなどを調整できます。画面幅768px以下では左右画像の配置を調整し、600px以下では中央の画像だけを表示する構成へ切り替わります。そのため、スマートフォン・タブレット・PCで利用しやすいレスポンシブ対応のカルーセルとして活用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
コードをコピーして使おう！
<!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などすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルは、HTML・CSS・JavaScriptを使用して、中央の画像を大きく強調して表示するカルーセルを作成します。HTMLで6枚の画像と前へ・次へボタンを配置し、CSSで中央・左右・待機中の画像それぞれの大きさや位置、透明度、影を設定します。JavaScriptでは現在表示している画像番号を管理し、ボタンをクリックするたびに中央・左・右の画像を切り替えます。
サンプルはindex.html、style.css、script.jsの3ファイルと、カルーセルで使用する6枚の画像で構成されています。画像はimagesフォルダへ配置し、index.htmlから読み込みます。
sample/
├── index.html
├── style.css
├── script.js
└── images/
├── image1.png
├── image2.png
├── image3.png
├── image4.png
├── image5.png
└── image6.png
各ファイルの役割
index.htmlはカルーセル全体を構成するファイルです。6枚の画像と前へ・次へボタンを配置します。表示する画像を変更する場合は、imagesフォルダへ画像を配置し、それぞれのimg要素のsrcを実際の画像ファイル名へ変更します。
style.cssはカルーセルの見た目を設定するファイルです。画像の横幅や高さ、中央画像の拡大率、左右画像の縮小率と透明度、角丸、影、画像が移動するときの速度、前へ・次へボタンのサイズやデザインを変更できます。
script.jsは画像の切り替えを行うファイルです。現在中央に表示している画像を管理し、その前後の画像へ位置を表すクラスを付けます。次へボタンでは次の画像、前へボタンでは前の画像を中央へ移動させ、最後まで進んだ場合も繰り返し切り替えられます。
imagesフォルダには、カルーセルで使用する6枚の画像を配置します。このサンプルではimage1.pngからimage6.pngまでの6枚を使用します。
設置方法・使い方
sampleフォルダ内にindex.html、style.css、script.jsを配置し、同じ階層にimagesフォルダを作成します。imagesフォルダへ使用する6枚の画像を配置してください。
画像を配置したら、index.htmlにある各img要素のsrcを、実際に配置した画像のファイル名へ変更します。たとえばimages/image1.pngのように指定します。設定後にsample/index.htmlをブラウザで開くとカルーセルが表示されます。前へ・次へボタンをクリックすると中央の画像が順番に切り替わります。
カスタマイズできる内容
index.htmlでは、カルーセルに表示する画像と代替テキストを変更できます。画像を差し替える場合はimagesフォルダへ使用する画像を配置し、srcとaltを画像内容に合わせて編集します。
style.cssでは、カルーセル全体の横幅、画像の横幅と高さ、角丸、影、中央画像の拡大率、左右画像の縮小率と透明度、画像の移動位置、切り替え時間を変更できます。前へ・次へボタンについても、大きさ、間隔、背景、影、矢印サイズなどを調整できます。
数値調整
style.css
max-width:980px;
カルーセル全体の最大横幅です。値を大きくするとカルーセルを広く表示でき、小さくするとコンパクトになります。
padding:34px 0;
画像表示エリアの上下余白です。34pxを大きくすると上下の余白が広がり、小さくすると狭くなります。
height:280px;
スライド管理エリアの高さです。画像の高さを変更する場合は、表示に必要な高さに合わせて調整します。
width:31%;
PC表示で使用する各画像の横幅です。値を大きくすると画像が横に広がり、小さくすると細くなります。
height:240px;
PC表示で使用する画像の高さです。値を大きくすると縦に高くなり、小さくすると低くなります。
border-radius:18px;
画像の角丸です。値を大きくすると丸みが強くなり、0にすると四角い表示になります。
transition:transform .55s ease;
画像が位置や大きさを切り替える時間です。.55sを大きくするとゆっくり変化し、小さくすると速く変化します。透明度と影にも同じ.55sが設定されています。
opacity:.65;
左右に表示する画像の透明度です。1に近づけると濃く表示され、0に近づけると透明になります。
scale(.88)
左右画像の縮小率です。1に近づけると中央画像に近い大きさになり、値を小さくするとさらに小さく表示されます。
scale(1.08)
中央画像の拡大率です。値を大きくすると中央画像がより大きく表示され、1にすると元のサイズになります。
gap:14px;
前へ・次へボタンの間隔です。値を大きくするとボタン同士の間隔が広がります。
width:52px;・height:52px;
前へ・次へボタンの大きさです。値を大きくするとボタンが大きくなり、小さくするとコンパクトになります。
width:12px;・height:12px;
ボタン内に表示する矢印の大きさです。値を変更すると矢印のサイズを調整できます。
レスポンシブ対応
このサンプルはstyle.cssのメディアクエリによってレスポンシブ対応しています。画面幅768px以下では画像幅を46%へ変更し、左右画像と待機画像の移動位置もタブレット向けに調整します。
画面幅600px以下では各画像をwidth:100%、height:220pxに変更し、左右と待機中の画像を透明にして中央画像だけを表示します。これにより、PCでは中央画像と左右画像を同時に見せ、スマートフォンでは1枚の画像を画面幅に合わせて表示できます。
コメント