画像クリックで切り替わるカルーセルを作る方法
画像クリックで切り替わるカルーセルを作る方法を紹介します。このサンプルでは、大きく表示するメイン画像の下に複数の小さな画像を並べ、好きな画像をクリックするとメイン画像がクリックした画像へ切り替わるカルーセルをHTML・CSS・JavaScriptで実装します。左右の矢印ボタンを使わず、表示したい画像を直接選択できるシンプルな構成です。
ECサイトの商品画像、制作実績、施設や店舗の写真、旅行先の紹介など、複数の画像から見たいものを選んでもらいたい場面に利用できます。現在メインに表示されている画像に対応する小さな画像には青い枠線を付けるため、どの画像を選択しているのかも確認できます。JavaScriptではクリックされた画像の情報を取得し、メイン画像の表示内容を切り替えます。
HTMLでは表示する画像や代替テキストを変更でき、CSSではカルーセルの横幅、メイン画像の高さ、小さな画像のサイズ、画像同士の間隔、枠線、角丸などを調整できます。画像部分は画面幅に合わせて縮小するため、スマートフォン・タブレット・PCでも利用できます。複雑なライブラリを使用せず、バニラ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="image-click-carousel_wrap">
<!-- メイン画像 -->
<div class="image-click-carousel_main">
<img
class="image-click-carousel_main-image"
src="images/image1.png"
alt="画像1">
</div>
<!-- クリックして切り替える画像一覧 -->
<div class="image-click-carousel_list">
<!-- 画像1 -->
<button
class="image-click-carousel_button is-active"
type="button"
data-image="images/image1.png"
data-alt="画像1">
<img
class="image-click-carousel_thumbnail"
src="images/image1.png"
alt="画像1">
</button>
<!-- 画像2 -->
<button
class="image-click-carousel_button"
type="button"
data-image="images/image2.png"
data-alt="画像2">
<img
class="image-click-carousel_thumbnail"
src="images/image2.png"
alt="画像2">
</button>
<!-- 画像3 -->
<button
class="image-click-carousel_button"
type="button"
data-image="images/image3.png"
data-alt="画像3">
<img
class="image-click-carousel_thumbnail"
src="images/image3.png"
alt="画像3">
</button>
<!-- 画像4 -->
<button
class="image-click-carousel_button"
type="button"
data-image="images/image4.png"
data-alt="画像4">
<img
class="image-click-carousel_thumbnail"
src="images/image4.png"
alt="画像4">
</button>
</div>
<!-- 操作説明 -->
<p class="image-click-carousel_note">
下の画像をクリックすると、上のメイン画像が選択した画像へ切り替わります。
</p>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルと、カルーセルで使用する画像を保存するimagesフォルダで構成されています。HTMLではメイン画像と、その下に並べる4枚の切り替え用画像を記述します。CSSではカルーセル全体の横幅、画像の比率、画像同士の間隔、選択中の枠線などを設定し、JavaScriptではクリックした画像へメイン画像を切り替える処理を行います。
sample/
├── index.html
├── style.css
├── script.js
└── images/
├── image1.png
├── image2.png
├── image3.png
└── image4.png
各ファイルの役割
index.htmlはカルーセル全体を構成するファイルです。初期状態ではimages/image1.pngをメイン画像として表示し、その下にimage1.pngからimage4.pngまでの4枚を切り替え用画像として配置しています。各ボタンのdata-image属性には、クリックしたときにメイン表示へ使用する画像ファイルを指定します。
style.cssはカルーセルのレイアウトとデザインを設定するファイルです。カルーセル全体の最大横幅、メイン画像の表示比率、切り替え画像の列数、画像同士の間隔、角丸、選択中の青い枠線などを変更できます。画面幅640px以下では、切り替え画像を4列から2列へ変更するレスポンシブ設定も含まれています。
script.jsは画像切り替えを行うファイルです。切り替え用画像をクリックすると、そのボタンのdata-image属性とdata-alt属性を取得してメイン画像へ反映します。同時に、現在選択されているボタンからis-activeクラスを外し、クリックしたボタンへ追加します。
imagesフォルダには、カルーセルで表示する4枚の画像を保存します。このサンプルではimage1.pngからimage4.pngまでを使用します。画像ファイル自体は利用者が用意してください。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを保存し、同じ階層へimagesフォルダを作成します。imagesフォルダの中へ、表示したい画像をimage1.png、image2.png、image3.png、image4.pngというファイル名で配置してください。
すべてのファイルを配置したあと、sample/index.htmlをブラウザで開きます。初期状態ではimage1.pngが大きく表示され、下に並ぶ画像をクリックすると、選択した画像へメイン表示が切り替わります。
カスタマイズできる内容
index.htmlでは、表示する画像、画像の代替テキスト、画像の枚数、画像の並び順、操作説明文を変更できます。画像を変更する場合は、img要素のsrc属性だけでなく、対応するボタンのdata-image属性とdata-alt属性も同じ内容へ変更してください。
style.cssでは、カルーセル全体の最大横幅、内側余白、背景色、枠線、角丸、メイン画像と切り替え画像の表示比率、切り替え画像の列数、画像同士の間隔、選択中の枠線色などを変更できます。
数値調整
style.css
max-width:700px;
カルーセル全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。
margin:40px auto;
カルーセル全体の上下余白です。40pxを大きくすると上下の間隔が広がります。
padding:24px;
カルーセル全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
カルーセル全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
border-radius:12px;
メイン画像部分の角丸です。値を大きくすると丸みが強くなります。
aspect-ratio:16/9;
メイン画像の表示比率です。このサンプルでは横16・縦9の比率で表示します。
grid-template-columns:repeat(4,1fr);
切り替え用画像の列数です。このサンプルでは4列表示です。4を変更すると1行に表示する枚数を変更できます。
gap:10px;
切り替え用画像同士の間隔です。値を大きくすると画像の間隔が広がります。
margin-top:12px;
メイン画像と切り替え画像一覧の間隔です。12pxを大きくすると上下の間隔が広がります。
border:3px solid transparent;
切り替え用画像ボタンの枠線幅です。3pxを大きくすると、選択中に表示される青い枠線も太くなります。
border-radius:8px;
切り替え用画像の角丸です。値を大きくすると丸みが強くなります。
aspect-ratio:4/3;
切り替え用画像の表示比率です。このサンプルでは横4・縦3の比率で表示します。
margin:18px 0 0;
操作説明文の上側余白です。18pxを大きくすると画像一覧との間隔が広がります。
padding:18px;
画面幅640px以下で使用するカルーセル全体の内側余白です。値を変更するとスマートフォン表示時の余白が変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでカルーセル全体にwidth:100%とmax-width:700pxを指定しているため、画面幅に合わせて全体が縮小されます。メイン画像と切り替え用画像にもwidth:100%を指定しています。通常は切り替え画像を4列で表示し、画面幅640px以下ではgrid-template-columns:repeat(2,1fr);へ切り替えて2列表示にするため、スマートフォン・タブレット・PCで利用できます。
コメント