Webサイトでは、複数の画像やコンテンツを同じ場所で順番に切り替えるスライダーがよく使われます。
ファーストビューやギャラリーなどで見かけることが多く、複雑な機能に見えますが、基本的な仕組みはそれほど難しくありません。
HTMLで複数のスライドを用意し、CSSで表示するスライドを限定し、JavaScriptで「現在どのスライドを表示しているのか」を切り替えていきます。
この記事ではライブラリを使わず、左右のボタンをクリックすると1枚ずつ表示が切り替わるシンプルなスライダーを作ります。
HTMLでスライダーの構造を作る
まずはHTMLで、スライダーの土台を作ります。
今回は3枚の画像と、「前へ」「次へ」の2つのボタンを用意します。
3枚のスライドを用意する
HTMLは次のように記述します。
<div class="slider">
<div class="slides">
<div class="slide is-active">
<img src="image01.jpg" alt="スライド画像1">
</div>
<div class="slide">
<img src="image02.jpg" alt="スライド画像2">
</div>
<div class="slide">
<img src="image03.jpg" alt="スライド画像3">
</div>
</div>
<button class="slider-prev" type="button" aria-label="前のスライド">
←
</button>
<button class="slider-next" type="button" aria-label="次のスライド">
→
</button>
</div>3つの.slideのうち、最初の要素だけに**.is-active**を付けています。
今回はこのclassを利用して、「現在表示するスライド」を管理します。
JavaScriptで.is-activeを付け替えていくことが、今回のスライダーの基本的な仕組みです。
カルーセルとの構造の違い
前回作ったカルーセルでは、カードを横方向に並べて、その一覧自体をスクロールさせました。
今回のスライダーでは、複数のスライドを用意したうえで、その中から1枚だけを表示します。
つまり、
- カルーセル：横に並んだコンテンツを移動して見る
- スライダー：表示するコンテンツを切り替える
という違いがあります。
見た目が似ていても、コードを見ると仕組みの違いが分かりやすくなります。
CSSで1枚のスライドだけを表示する
次はCSSです。
今回は.slideを通常時は非表示にして、.is-activeが付いているスライドだけを表示します。
displayで表示・非表示を切り替える
基本のCSSはこちらです。
.slider {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.slide {
display: none;
}
.slide.is-active {
display: block;
}
.slide img {
display: block;
width: 100%;
height: auto;
}ポイントは、
.slide {
display: none;
}
.slide.is-active {
display: block;
}の部分です。
通常の.slideは非表示ですが、.is-activeが追加された要素だけが表示されます。
JavaScriptでは画像そのものを変更するのではなく、どの要素に.is-activeを付けるのかを変更するわけです。
左右のボタンを配置する
ボタンもCSSでスライダーの左右へ配置してみます。
.slider-prev,
.slider-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border: 1px solid #333;
background: #fff;
cursor: pointer;
}
.slider-prev {
left: 16px;
}
.slider-next {
right: 16px;
}position: absolute;を使って、スライダーの左右にボタンを配置しています。
親要素である.sliderにposition: relative;を指定しているため、スライダーを基準としてボタンの位置を決めることができます。
JavaScriptでスライドを切り替える
HTMLとCSSだけでも最初の画像は表示できますが、まだ左右のボタンを押しても何も起こりません。
そこでJavaScriptを使い、現在表示しているスライドを切り替えます。
現在のスライド番号を管理する
まず必要な要素を取得します。
const slides = document.querySelectorAll('.slide');
const prevButton = document.querySelector('.slider-prev');
const nextButton = document.querySelector('.slider-next');
let currentIndex = 0;currentIndexは、現在どのスライドを表示しているのかを記録するための変数です。
JavaScriptでは最初の要素を0として数えるため、
1枚目 → 0
2枚目 → 1
3枚目 → 2となります。
次に、表示を更新する処理を作ります。
function showSlide(index) {
slides.forEach((slide) => {
slide.classList.remove('is-active');
});
slides[index].classList.add('is-active');
}一度すべてのスライドから.is-activeを削除し、表示したいスライドだけに付け直しています。
次へ・前へボタンで切り替える
続いてボタンをクリックしたときの処理です。
nextButton.addEventListener('click', () => {
currentIndex++;
if (currentIndex >= slides.length) {
currentIndex = 0;
}
showSlide(currentIndex);
});
prevButton.addEventListener('click', () => {
currentIndex--;
if (currentIndex < 0) {
currentIndex = slides.length - 1;
}
showSlide(currentIndex);
});「次へ」を押すとcurrentIndexを1増やし、「前へ」を押すと1減らしています。
さらに最後のスライドで「次へ」を押した場合は最初へ戻り、最初のスライドで「前へ」を押した場合は最後へ移動します。
これによって、
1 → 2 → 3 → 1 → 2……
と繰り返し切り替えられるスライダーになります。
【まとめ】スライダーは表示する要素をJavaScriptで切り替える
基本的なスライダーは、HTML・CSS・JavaScriptの役割を分けて考えると仕組みを理解しやすくなります。
今回の実装では、
- HTML：複数のスライドと左右のボタンを用意する
- CSS：
.is-activeが付いたスライドだけ表示する - JavaScript：
.is-activeを付ける要素を切り替える
という構成で作りました。
前回のカルーセルでは、横並びにしたカードそのものをスクロールさせました。一方、今回のスライダーでは同じ領域に表示するコンテンツを1枚ずつ切り替えています。
ここから自動再生やフェードアニメーション、現在位置を示すドット、スワイプ操作などを追加することもできます。
ただし、機能を増やすほどコードも操作も複雑になります。
まずは**「現在のスライドを管理して、表示する要素を切り替える」**という基本を理解してから、必要な機能だけを追加していくと分かりやすいでしょう。