はじめに
この記事を読めば、HTMLスライダーの作り方や使い方が簡単に理解できるようになります。
初心者の方でも手軽にチャレンジできる内容を詳しく解説していきますので、ぜひお付き合いください。
スライダーとは、ウェブページ上で画像やテキストを横にスライドさせることで情報を表示するUI（ユーザーインターフェース）のことです。
HTMLスライダーは、主にJavaScriptやCSSを使って実装されますが、この記事では初心者にも分かりやすいように、基本的なHTMLスライダーの作り方や使い方、カスタマイズ方法、応用例を解説していきます。
●HTMLスライダーの基本構造
まずは、HTMLスライダーの基本構造を理解しましょう。
基本的な構造は次のようになります。
- コンテナ要素：スライダー全体を囲む枠組み
- スライド要素：スライドさせる画像やテキストが入る部分
- コントロール要素：スライドの切り替えを行うボタンやインジケーター
シンプルなHTMLスライダーのサンプルコードを紹介します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>シンプルなHTMLスライダー</title>
<style>
/* ここにCSSを記述 */
</style>
</head>
<body>
<div class="slider-container">
<div class="slide">
<img src="image1.jpg" alt="画像1">
</div>
<div class="slide">
<img src="image2.jpg" alt="画像2">
</div>
<div class="slide">
<img src="image3.jpg" alt="画像3">
</div>
</div>
<script>
/* ここにJavaScriptを記述 */
</script>
</body>
</html>このサンプルコードでは、まだCSSとJavaScriptが未記述なので、実際にスライドする機能はありません。
次のステップで、それぞれの要素にスタイルを適用し、スライドさせる機能を実装していきましょう。
●HTMLスライダーのスタイルを適用する
HTMLスライダーにスタイルを適用するためには、CSSを使います。
下記のサンプルコードでは、スライダーの基本的なスタイルが適用されています。
<style>
.slider-container {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.slide {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.slide.active {
opacity: 1;
}
</style>このCSSでは、コンテナ要素にposition: relative;とoverflow: hidden;を設定し、スライド要素にposition: absolute;を設定することで、スライド要素がコンテナ要素内で重なり合うように配置されます。
また、スライド要素の透明度を操作することで、スライドの切り替えを表現しています。
●HTMLスライダーの機能を実装する
最後に、JavaScriptを使ってスライドの切り替え機能を実装しましょう。
下記のサンプルコードでは、シンプルなスライド切り替え機能が実装されています。
<script>
const slides = document.querySelectorAll('.slide');
let currentIndex = 0;
function switchSlide() {
slides[currentIndex].classList.remove('active');
currentIndex = (currentIndex + 1) % slides.length;
slides[currentIndex].classList.add('active');
}
setInterval(switchSlide, 3000);
</script>このJavaScriptコードでは、querySelectorAllを使ってスライド要素を取得し、currentIndexという変数で現在のスライドインデックスを管理しています。
switchSlide関数は、現在のスライドからactiveクラスを削除し、次のスライドにactiveクラスを追加することでスライドを切り替えています。
setInterval関数を使って、一定間隔でswitchSlide関数を呼び出し、自動的にスライドが切り替わるようにしています。
これで、シンプルなHTMLスライダーの実装が完了しました。
実際にブラウザで表示して、スライドが切り替わるか確認してみましょう。
【使い方の例1：矢印ボタンを追加する】
スライドの切り替えを手動で行いたい場合は、矢印ボタンを追加してみましょう。
次のサンプルコードでは、左右の矢印ボタンが追加され、クリックすることでスライドが切り替わるようになっています。
<div class="slider-container">
<!-- ここにスライド要素を記述 -->
<button class="arrow prev" onclick="switchSlide(-1)">＜</button>
<button class="arrow next" onclick="switchSlide(1)">＞</button>
</div>.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.7);
border: none;
font-size: 24px;
padding: 10px;
cursor: pointer;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}function switchSlide(direction) {
slides[currentIndex].classList.remove('active');
currentIndex = (currentIndex + direction + slides.length) % slides.length;
slides[currentIndex].classList.add('active');
}【使い方の例2：インジケーターを追加する】
スライドの現在位置を表示するインジケーターを追加してみましょう。
次のサンプルコードでは、インジケーターが追加され、クリックすることで指定のスライドに移動できるようになっています。
<div class="slider-container">
<!-- ここにスライド要素を記述 -->
<div class="indicators">
<button onclick="goToSlide(0)">1</button>
<button onclick="goToSlide(1)">2</button>
<button onclick="goToSlide(2)">3</button>
</div>
</div>.indicators {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
gap: 5px;
}
.indicators button {
background: #ffffff;
border: none;
font-size: 16px;
padding: 5px;
cursor: pointer;
}function goToSlide(index) {
slides[currentIndex].classList.remove('active');
currentIndex = index;
slides[currentIndex].classList.add('active');
}このサンプルコードでは、インジケーター用のボタンが追加され、goToSlide関数を呼び出すことで指定のスライドに移動できるようになっています。
CSSでは、インジケーターを中央下部に配置し、ボタン同士の間隔を調整しています。
まとめ
最後までお読みいただき、ありがとうございました。
まずはシンプルなスライダーから始めて、機能を追加していくことで、自分だけのオリジナルなスライダーを作成してみましょう。
