全画面画像スライダーを作る方法
全画面画像スライダーをHTML・CSS・JavaScriptで作る方法を紹介します。画面いっぱいに画像を表示し、「前へ」「次へ」ボタンで画像を切り替えられるサンプルです。トップページのメインビジュアルやランディングページのファーストビューなど、画像を大きく見せたい場面に使いやすい構成です。
このサンプルでは、スライダーの高さを画面の高さに合わせ、画像を背景のように大きく表示します。JavaScriptで現在の画像を管理し、ボタン操作に合わせて表示する画像を切り替えます。余白の少ない迫力のある見た目にできるため、写真や商品イメージを印象的に見せたい場合に便利です。
表示する画像は自由に差し替えられ、CSSで画像の表示方法やボタンの位置を調整できます。ライブラリを使わずに実装できるため、全画面画像スライダーの基本的な作り方を理解したい方にもおすすめです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
このデモでは、画面いっぱいに画像を表示する全画面画像スライダーを確認できます。「前へ」「次へ」ボタンをクリックすると画像が切り替わります。
コードをコピーして使おう！
<!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="fullscreen-image-slider_demo">
<!-- 画像表示エリア -->
<div class="fullscreen-image-slider_box">
<!-- 表示画像 -->
<img
id="fullscreen-image-slider-image"
class="fullscreen-image-slider_image"
src="images/【ここに1枚目の画像ファイル名】"
alt="スライダー画像">
<!-- 前へボタン -->
<button
class="fullscreen-image-slider_button fullscreen-image-slider_prev"
type="button"
id="fullscreen-image-slider-prev"
aria-label="前へ">
</button>
<!-- 次へボタン -->
<button
class="fullscreen-image-slider_button fullscreen-image-slider_next"
type="button"
id="fullscreen-image-slider-next"
aria-label="次へ">
</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は全画面画像スライダーを構成するファイルです。表示画像と前へ・次へボタンを配置しています。最初に表示する画像は、img要素のsrcを変更することで指定できます。
style.cssは全画面画像スライダーのデザインを設定するファイルです。画像表示エリアの高さ、背景色、画像の表示方法、前へ・次へボタンのサイズや位置、矢印の色などを変更できます。
script.jsは画像を切り替える処理を行うファイルです。表示する画像ファイル名を配列へ登録し、前へボタンを押すと1枚前、次へボタンを押すと1枚次の画像へ切り替えます。最初と最後の画像もつながっているため、繰り返し画像を切り替えられます。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、sample/images/へ使用する3枚の画像を保存します。index.htmlのsrc="images/【ここに1枚目の画像ファイル名】"と、script.jsのfullscreenImageSliderImagesに記載されている画像ファイル名を、実際に配置した画像ファイル名へ変更してください。
ファイルを配置したあと、sample/index.htmlをブラウザで開きます。画像はブラウザの表示領域いっぱいに表示されます。左側のボタンをクリックすると前の画像、右側のボタンをクリックすると次の画像へ切り替わります。
カスタマイズできる内容
index.htmlでは最初に表示する画像を変更できます。スライダーで使用する画像そのものは、imagesフォルダへ画像を配置し、script.jsのfullscreenImageSliderImagesに登録することで変更できます。
style.cssでは画像表示エリアの高さ、最小高さ、背景色、画像の表示方法、前へ・次へボタンのサイズ、配置位置、背景色、影、矢印のサイズや色を変更できます。object-fit:cover;によって、画像の縦横比を保ちながら表示エリア全体を覆うように表示しています。
数値調整
style.css
height:100vh;
画像表示エリアの高さです。100vhにすることで、ブラウザの表示領域と同じ高さになります。
min-height:420px;
画像表示エリアの最小高さです。画面の高さが小さい場合でも420pxより低くならないようにしています。値を大きくすると最低限確保される高さが大きくなります。
width:56px;
前へ・次へボタンの横幅です。値を大きくするとボタンが大きくなり、小さくするとコンパクトになります。
height:56px;
前へ・次へボタンの高さです。横幅と同じ値にすることで円形のボタンになります。
left:24px;
前へボタンと画面左端との間隔です。値を大きくするとボタンが内側へ移動し、小さくすると左端へ近づきます。
right:24px;
次へボタンと画面右端との間隔です。値を大きくするとボタンが内側へ移動し、小さくすると右端へ近づきます。
width:12px;
ボタン内に表示する矢印の横幅です。値を大きくすると矢印が大きくなります。
height:12px;
ボタン内に表示する矢印の高さです。横幅と合わせて変更すると矢印全体のサイズを調整できます。
border-top:4px solid #2563eb;
矢印を構成する線の太さと色です。4pxを変更すると矢印の線の太さを調整でき、#2563ebを変更すると矢印の色を変更できます。
box-shadow:0 8px 20px rgba(0,0,0,.15);
前へ・次へボタンの影です。8pxや20pxを変更することで、影の位置や広がりを調整できます。
レスポンシブ対応
このサンプルは画面サイズに合わせて表示される構成です。スライダー全体をwidth:100%、画像表示エリアをheight:100vhとしているため、ブラウザの横幅と高さに合わせて表示されます。画像にはwidth:100%、height:100%、object-fit:coverを指定しているため、画像の縦横比を保ちながら表示エリア全体を覆います。スマートフォン・タブレット・PCの画面サイズに合わせて全画面表示できます。
コメント