HTMLで画像を順番に切り替えるスライドショーは、HTMLで構造、CSSで見た目、JavaScriptで操作を作ります。HTMLだけでは、前後ボタンを押したときの切り替え処理は実装できません。
以前はjQueryのプラグインを使う例が多くありましたが、基本的なスライドショーなら現在のJavaScriptだけでも作れます。ライブラリを増やさず、どの処理で画像が切り替わるかを理解しやすい方法です。
この記事では、3枚の画像を前後ボタンで切り替えるスライドショーを、HTML、CSS、JavaScriptの順で作ります。キーボード操作、現在位置の通知、自動再生を使う場合の停止ボタンも解説します。
HTMLスライドショーの完成イメージ
上の図は、スライドショーを構成する主な部品です。見た目だけで画像を切り替えるのではなく、マウスを使わない人や動きを止めたい人も操作できるようにします。
- 各画像の内容が分かる
alt属性 - キーボードで押せる前へ・次へボタン
- 何枚目かを示す現在位置
- 見失わないフォーカス表示
- 自動再生する場合の停止・再生ボタン
まずは自動再生なしのスライドショーを完成させます。利用者が自分の速度で画像を見られるため、学習用の最初の実装にも向いています。
作業用ファイルと画像を用意する
作業用フォルダーへ、HTML、CSS、JavaScriptと3枚の画像を保存します。ファイル名は次の構成にそろえてください。
slideshow/
├── index.html
├── style.css
├── script.js
└── images/
├── slide-1.jpg
├── slide-2.jpg
└── slide-3.jpg3枚の画像は、同じ縦横比にそろえると切り替え時の高さが安定します。サイズが違う画像を使う場合は、後ほどCSSのaspect-ratioとobject-fitで表示枠を整えます。
HTMLでスライドと操作ボタンを作る
index.htmlへ、3枚の画像と前後ボタン、現在位置の表示を追加します。最初の画像以外にはhidden属性を付け、ページを開いた時点では非表示にします。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>風景スライドショー</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<main>
<h1>おすすめの風景</h1>
<section
class="slideshow"
role="region"
aria-roledescription="カルーセル"
aria-label="おすすめの風景"
>
<div class="slides">
<figure class="slide">
<img src="images/slide-1.jpg" alt="夕日に染まる山と湖">
<figcaption>夕暮れの湖</figcaption>
</figure>
<figure class="slide" hidden>
<img src="images/slide-2.jpg" alt="青空の下に広がる草原">
<figcaption>夏の草原</figcaption>
</figure>
<figure class="slide" hidden>
<img src="images/slide-3.jpg" alt="木漏れ日が差し込む森の小道">
<figcaption>森の小道</figcaption>
</figure>
</div>
<div class="controls">
<button class="prev" type="button">前へ</button>
<p class="status" aria-live="polite">1 / 3</p>
<button class="next" type="button">次へ</button>
</div>
</section>
</main>
</body>
</html>button要素は、EnterキーやSpaceキーでも操作できます。クリック用のdivを自作するより、ブラウザが持つ操作方法を利用できます。
aria-live="polite"を付けた現在位置は、ボタン操作後の変化を音声読み上げへ伝えるための領域です。画像のalt属性には、「画像」ではなく各画像の内容を書きます。
CSSで画像とボタンを整える
変更前は画像が元の大きさで表示され、ボタンも離れた位置に並びます。style.cssへ次のコードを追加し、画面幅に収まるカード型の表示へ変更します。
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 32px 16px;
font-family: system-ui, sans-serif;
color: #172033;
background: #f4f7fb;
}
main {
width: min(100%, 800px);
margin-inline: auto;
}
.slideshow {
padding: 16px;
background: #ffffff;
border-radius: 16px;
box-shadow: 0 12px 32px rgb(15 23 42 / 12%);
}
.slide {
margin: 0;
}
.slide img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 10px;
}
.slide figcaption {
margin-top: 8px;
text-align: center;
}
.controls {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 16px;
}
.controls button {
min-height: 44px;
padding: 8px 20px;
color: #ffffff;
background: #2457d6;
border: 0;
border-radius: 999px;
cursor: pointer;
}
.controls button:hover {
background: #1743b2;
}
.controls button:focus-visible {
outline: 3px solid #f59e0b;
outline-offset: 3px;
}
.status {
min-width: 4em;
margin: 0;
text-align: center;
}aspect-ratio: 16 / 9で表示枠の比率をそろえ、object-fit: coverで枠を埋めます。画像の端が切れる可能性があるため、重要な被写体が中央付近にある画像で確認してください。
:focus-visibleの枠は、キーボードでどのボタンを選んでいるかを示します。デザインに合わないという理由だけでoutline: noneにしないようにしましょう。
JavaScriptで前後の画像へ切り替える
script.jsでは、すべてのスライドを取得し、現在表示している番号をcurrentIndexへ保存します。ボタンが押されたら、現在の画像を隠して次の画像を表示します。
const slideshow = document.querySelector('.slideshow');
const slides = [...slideshow.querySelectorAll('.slide')];
const prevButton = slideshow.querySelector('.prev');
const nextButton = slideshow.querySelector('.next');
const status = slideshow.querySelector('.status');
let currentIndex = 0;
function showSlide(nextIndex) {
slides[currentIndex].hidden = true;
currentIndex = (nextIndex + slides.length) % slides.length;
slides[currentIndex].hidden = false;
status.textContent = `${currentIndex + 1} / ${slides.length}`;
}
prevButton.addEventListener('click', () => {
showSlide(currentIndex - 1);
});
nextButton.addEventListener('click', () => {
showSlide(currentIndex + 1);
});次へボタンではcurrentIndex + 1、前へボタンではcurrentIndex - 1を渡します。計算式の%を使って、最後の次は最初へ、最初の前は最後へ戻るようにしています。
3つのファイルを保存してindex.htmlを開き、前へ・次へボタンを押してください。画像と説明、現在位置が一緒に変われば基本のスライドショーは完成です。
自動再生を追加するときは停止ボタンも用意する
スライドを自動で切り替える場合、利用者が停止・再開できるボタンを用意します。文章を読み終わる前に切り替わったり、動きで集中しづらくなったりする人がいるためです。
まず、現在位置の前へ再生・停止ボタンを追加します。
<button class="toggle-play" type="button">再生</button>次に、script.jsの末尾へ自動再生の処理を追加します。この例では、利用者が再生ボタンを押したときだけ5秒ごとの切り替えを開始します。
const togglePlayButton = slideshow.querySelector('.toggle-play');
let timerId = null;
function startAutoPlay() {
timerId = window.setInterval(() => {
showSlide(currentIndex + 1);
}, 5000);
togglePlayButton.textContent = '停止';
}
function stopAutoPlay() {
window.clearInterval(timerId);
timerId = null;
togglePlayButton.textContent = '再生';
}
togglePlayButton.addEventListener('click', () => {
if (timerId === null) {
startAutoPlay();
} else {
stopAutoPlay();
}
});
prevButton.addEventListener('click', stopAutoPlay);
nextButton.addEventListener('click', stopAutoPlay);
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
stopAutoPlay();
}
});前後ボタンを押したときは、自動再生を停止します。利用者が目的の画像へ移動した直後に勝手に切り替わることを防げます。
ページを開いた直後から自動再生する場合は、動きを減らす設定のprefers-reduced-motionも確認し、停止ボタンをスライドより前に操作できる位置へ置きます。まずは手動再生から始める方が実装を確認しやすいでしょう。
jQueryを使う場合の考え方
既存サイトがすでにjQueryを読み込み、スライドショー用プラグインを運用している場合は、無理に書き換える必要はありません。まずjQuery本体とプラグインの対応バージョン、更新状況、ライセンスを確認します。
新しく作る小さなスライドショーであれば、この記事のようにJavaScriptだけで作ると依存関係を減らせます。一方、複雑なタッチ操作や多数の表示パターンが必要なら、アクセシビリティと保守状況を確認したうえでライブラリを選ぶ方法もあります。
| 方法 | 向いている場面 | 確認すること |
|---|---|---|
| JavaScriptで自作 | 小規模で動きを理解したい | 操作、状態管理、アクセシビリティを自分で実装する |
| jQueryプラグイン | 既存のjQueryサイトを保守する | 対応バージョン、更新状況、既存設定を確認する |
| ほかのライブラリ | 複雑なUIやタッチ操作が必要 | 容量、機能、キーボード操作、停止方法を確認する |
スライドショーが動かないときの確認ポイント
script.jsの読み込み場所を確認する
script要素のファイル名と保存場所を確認します。head内で読み込む場合はdeferを付け、HTMLの解析後に処理が実行されるようにしてください。
クラス名をそろえる
HTMLがclass="next"なら、JavaScriptはquerySelector('.next')です。大文字と小文字、ハイフン、先頭のドットを確認します。
開発者ツールのエラーを確認する
ボタンを押しても反応しない場合は、ブラウザの開発者ツールでConsoleを開きます。ファイルが見つからないエラーや、存在しない要素を取得しているエラーがないか確認してください。
HTMLスライドショーに関するよくある質問
HTMLとCSSだけで画像を切り替えられますか？
CSSだけで切り替える例もありますが、前後移動、現在位置、停止・再開などの状態管理はJavaScriptを使う方が意図を整理しやすくなります。HTMLは構造、CSSは見た目、JavaScriptは操作に分けて考えてください。
画像サイズが違っても使えますか？
使えますが、切り替えるたびに高さが変わるとページが揺れて見えます。あらかじめ同じ比率へそろえるか、aspect-ratioとobject-fitで表示枠を統一してください。
自動再生は必須ですか？
必須ではありません。手動操作だけなら利用者が自分の速度で見られます。自動再生を追加する場合は、停止・再開できるボタンとキーボード操作を用意してください。
まとめ
HTMLスライドショーは、HTMLで画像とボタン、CSSで表示枠、JavaScriptで切り替え処理を作ります。基本的な実装ならjQueryを追加せず、現在のJavaScriptだけでも作れます。
最初は前へ・次へを手動で操作できる形を完成させてください。自動再生を追加する場合は、停止方法、キーボード操作、現在位置の通知まで含めて確認しましょう。