キーボード操作でスライドする画像スライダーを作る方法
キーボード操作でスライドする画像スライダーを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="keyboard-image-slider_demo">
<!-- 画像表示エリア -->
<div class="keyboard-image-slider_box">
<!-- 横に動くスライド一覧 -->
<div class="keyboard-image-slider_track" id="keyboard-image-slider-track">
<!-- スライド1 -->
<div class="keyboard-image-slider_slide">
<img src="images/【ここに1枚目の画像ファイル名】" alt="画像1">
</div>
<!-- スライド2 -->
<div class="keyboard-image-slider_slide">
<img src="images/【ここに2枚目の画像ファイル名】" alt="画像2">
</div>
<!-- スライド3 -->
<div class="keyboard-image-slider_slide">
<img src="images/【ここに3枚目の画像ファイル名】" alt="画像3">
</div>
</div>
</div>
<!-- 操作説明 -->
<div class="keyboard-image-slider_notice">
キーボードの← →キーで画像を切り替えられます。
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルと、スライダーで使用する3枚の画像で構成されています。HTMLでは3枚の画像を横に並べたスライダーと操作説明を作成し、CSSでは表示エリアのサイズや枠線、角丸、スライド時のアニメーションなどを設定します。JavaScriptではキーボードの左右矢印キーを検知し、表示する画像を前後へ切り替えます。
sample/
├── index.html
├── style.css
├── script.js
└── images/
├── 【ここに1枚目の画像ファイル名】
├── 【ここに2枚目の画像ファイル名】
└── 【ここに3枚目の画像ファイル名】
各ファイルの役割
index.htmlは画像スライダー全体を構成するファイルです。3枚の画像と「キーボードの← →キーで画像を切り替えられます。」という操作説明を配置しています。各img要素のsrcを変更することで、スライダーに表示する画像を変更できます。
style.cssはスライダーのデザインを設定するファイルです。スライダー全体の横幅、画像表示エリアの枠線、角丸、背景色、影、スライドの切り替え速度、操作説明の文字色などを変更できます。
script.jsはキーボード操作による画像切り替えを行うファイルです。右矢印キーを押すと次の画像、左矢印キーを押すと前の画像へ移動します。最後の画像から右矢印キーを押すと1枚目へ戻り、1枚目から左矢印キーを押すと最後の画像へ移動します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、sample/images/へ使用する3枚の画像を保存します。index.htmlに記載されているimages/【ここに○枚目の画像ファイル名】を、実際に配置した画像ファイル名へ変更してください。
ファイルを配置したあと、sample/index.htmlをブラウザで開きます。キーボードの右矢印キー「→」を押すと次の画像へ進み、左矢印キー「←」を押すと前の画像へ戻ります。画像は1枚ずつ表示され、キーを押すたびに横方向へスライドして切り替わります。
カスタマイズできる内容
index.htmlではスライダーに表示する画像とalt属性、操作説明の文章を変更できます。画像を差し替える場合はimagesフォルダへ画像を配置し、各img要素のsrcを実際の画像ファイル名へ変更します。
style.cssではスライダー全体の最大横幅、ページの余白や背景色、画像表示エリアの枠線、角丸、背景色、影、スライドの切り替え速度、操作説明の余白や文字色を変更できます。
script.jsではArrowRightとArrowLeftを使用してキーボード入力を判定しています。また、スライド数はHTML内の.keyboard-image-slider_slideから自動で取得されるため、同じ構造のスライドを追加するとJavaScript側でもその枚数が使用されます。
数値調整
style.css
padding:40px 20px;
ページ全体の内側余白です。40pxは上下、20pxは左右の余白を表します。値を大きくすると画面端との間隔が広がります。
max-width:760px;
スライダー全体の最大横幅です。値を大きくするとスライダーを広く表示でき、小さくするとコンパクトになります。
border:1px solid #dbeafe;
画像表示エリアの枠線です。1pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:18px;
画像表示エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
box-shadow:0 10px 30px rgba(15,23,42,.08);
画像表示エリアの影です。10pxや30pxを変更すると、影の位置や広がりを調整できます。
transition:transform .45s ease;
画像が横方向へ切り替わるアニメーション時間です。.45sは0.45秒を表します。値を大きくするとゆっくり、小さくすると速く切り替わります。
flex:0 0 100%;
1枚のスライドが表示エリアの横幅100%を使用する設定です。これにより1画面に1枚の画像を表示します。
margin-top:16px;
画像表示エリアと操作説明の間隔です。値を大きくすると間隔が広がり、小さくすると狭くなります。
レスポンシブ対応
このサンプルは画面幅に合わせて縮小できる構成です。style.cssのmax-width:760pxでスライダーの最大横幅を設定し、画像にはwidth:100%とheight:autoを指定しているため、画面が狭くなると画像も横幅に合わせて縮小されます。さらに、各スライドをflex:0 0 100%としているため、画面幅が変わっても1画面に1枚ずつ表示できます。スマートフォン・タブレット・PCで利用できます。
コメント