画像サイズを気にせず使えるスライダーを作る方法
画像サイズを気にせず使えるスライダーをHTML・CSS・JavaScriptで作る方法を紹介します。縦長・横長・正方形などサイズや縦横比が異なる画像でも、表示エリアの大きさを一定に保ったまま表示できるため、画像ごとにサイズを調整する手間を減らせます。
このサンプルでは、画像そのもののサイズは変更せず、固定サイズの表示エリア内へ収まるように表示します。そのため、大きさの異なる画像を混在させてもスライダー全体のレイアウトが崩れにくく、商品画像や写真ギャラリー、作品一覧など幅広い用途で利用できます。
表示する画像は自由に差し替えられ、前へ・次へボタンで画像を切り替えられます。画像サイズを統一して編集する必要がないため、さまざまなサイズの画像をそのまま利用したいWebサイトにも導入しやすいサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
このデモでは、縦長・横長・正方形などサイズの異なる画像を同じ表示エリアで切り替えられます。画像のサイズは変更せず、表示枠の中へ収まるように表示される様子を確認できます。
コードをコピーして使おう！
<!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="flexible-image-slider_demo">
<!-- 画像表示エリア -->
<div class="flexible-image-slider_box">
<!-- 横に動くスライド一覧 -->
<div class="flexible-image-slider_track" id="flexible-image-slider-track">
<!-- スライド1：画像1 -->
<div class="flexible-image-slider_slide">
<img src="images/【ここに1枚目の画像ファイル名】" alt="画像1">
</div>
<!-- スライド2：画像2 -->
<div class="flexible-image-slider_slide">
<img src="images/【ここに2枚目の画像ファイル名】" alt="画像2">
</div>
<!-- スライド3：画像3 -->
<div class="flexible-image-slider_slide">
<img src="images/【ここに3枚目の画像ファイル名】" alt="画像3">
</div>
</div>
</div>
<!-- 操作ボタン -->
<div class="flexible-image-slider_controls">
<button class="flexible-image-slider_button" type="button" id="flexible-image-slider-prev">
前へ
</button>
<button class="flexible-image-slider_button" type="button" id="flexible-image-slider-next">
次へ
</button>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルと、スライダーで使用する3枚の画像で構成されています。HTMLでは画像を横に並べたスライダーと前へ・次へボタンを作成し、CSSではサイズや縦横比が異なる画像を一定の表示枠へ収めるレイアウトを設定します。JavaScriptではボタンのクリックを検知して、表示する画像を順番に切り替えます。
sample/
├── index.html
├── style.css
├── script.js
└── images/
├── 【ここに1枚目の画像ファイル名】
├── 【ここに2枚目の画像ファイル名】
└── 【ここに3枚目の画像ファイル名】
各ファイルの役割
index.htmlはスライダー全体を構成するファイルです。3枚の画像をそれぞれスライドとして配置し、画像を切り替えるための前へ・次へボタンを設置しています。各img要素のsrcを変更することで、使用する画像を自由に差し替えられます。
style.cssはスライダーのデザインと画像の表示方法を設定するファイルです。各スライドに一定の高さを設定し、max-width:100%;とmax-height:100%;を使用することで、大きさや縦横比が異なる画像でも表示枠からはみ出さないようにしています。画像は縦横比を維持したまま中央へ配置されます。
script.jsは画像を切り替える処理を行うファイルです。現在表示しているスライド番号を管理し、前へ・次へボタンがクリックされるとtransformの位置を変更してスライドを横方向へ移動します。最後の画像から次へ進むと最初の画像へ戻り、最初の画像から前へ戻ると最後の画像が表示されます。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、sample/images/へ使用する3枚の画像を保存します。index.htmlに記載されているimages/【ここに1枚目の画像ファイル名】などの部分を、実際に配置した画像ファイル名へ変更してください。
ファイルを配置したあと、sample/index.htmlをブラウザで開きます。前へボタンをクリックすると1枚前の画像、次へボタンをクリックすると1枚次の画像へ切り替わります。画像のサイズや縦横比が異なる場合でも、それぞれの画像が表示枠内へ収まるように表示されます。
カスタマイズできる内容
index.htmlではスライダーに表示する画像やalt属性を変更できます。同じ構造のflexible-image-slider_slideを追加することで、表示する画像の枚数を増やすこともできます。
style.cssではスライダー全体の横幅、表示枠の高さ、背景色、枠線、角丸、影、画像周囲の余白部分の色、ボタンのサイズや色などを変更できます。画像自体には固定の横幅や高さを指定せず、最大サイズだけを制限しているため、異なるサイズの画像を縦横比を維持したまま表示できます。
数値調整
style.css
max-width:760px;
スライダー全体の最大横幅です。値を大きくするとスライダーが横に広がり、小さくするとコンパクトになります。
height:420px;
各スライドの表示枠の高さです。値を大きくすると画像を表示する範囲が高くなり、小さくすると低くなります。画像そのものの縦横比は維持されます。
max-width:100%;
画像の最大横幅です。横長の画像や大きな画像でも、表示枠の横幅を超えないように制限します。
max-height:100%;
画像の最大高さです。縦長の画像や高さの大きな画像でも、表示枠の高さを超えないように制限します。
transition:transform .45s ease;
画像を切り替えるときのスライド速度です。.45sを大きくするとゆっくり移動し、小さくすると速く移動します。
gap:16px;
前へ・次へボタンの間隔です。値を大きくするとボタン同士の間隔が広がり、小さくすると狭くなります。
margin-top:24px;
画像表示エリアと操作ボタンの間隔です。値を大きくすると上下の間隔が広がります。
padding:12px 28px;
前へ・次へボタンの内側余白です。12pxで上下、28pxで左右の大きさを調整できます。
font-size:16px;
前へ・次へボタンの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
レスポンシブ対応
このサンプルはスライダー全体にmax-width:760px;を指定し、親要素の横幅に合わせて縮小できる構成です。画像にはmax-width:100%とmax-height:100%を指定しているため、画像サイズや縦横比が異なっていても表示枠からはみ出さず、縦横比を維持したまま表示できます。スマートフォン・タブレット・PCでも同じ仕組みで利用できます。
コメント