Webサイトでは、商品や記事、制作実績などを横方向に並べて表示するカルーセルがよく使われます。
カルーセルというと複雑なJavaScriptが必要そうに見えますが、シンプルなものであればそれほど難しくありません。
HTMLでカードとボタンを用意し、CSSで横並びにして、JavaScriptでスクロールさせる。この3つの役割を分けて考えると仕組みを理解しやすくなります。
この記事では、ライブラリを使わずに、左右のボタンをクリックするとカードが横方向へ移動する基本的なカルーセルを作ります。
HTMLでカルーセルの構造を作る
まずはHTMLでカルーセルの土台を作ります。
今回は、3つのカードと左右に移動するためのボタンを用意します。
カードを横に並べるためのHTMLを書く
HTMLは次のように記述します。
<div class="carousel">
<button class="carousel-prev" type="button" aria-label="前へ">
←
</button>
<div class="carousel-list">
<div class="carousel-item">01</div>
<div class="carousel-item">02</div>
<div class="carousel-item">03</div>
</div>
<button class="carousel-next" type="button" aria-label="次へ">
→
</button>
</div>.carousel-listの中に、表示したい.carousel-itemを並べています。
今回は分かりやすくするために3つだけですが、同じ構造でカードを追加することもできます。
左右に配置したボタンは、あとからJavaScriptで操作します。
カルーセルを構成する要素の役割
今回のHTMLは、大きく3つの役割に分かれています。
.carousel：カルーセル全体.carousel-list：カードが並ぶ領域.carousel-item：一つひとつのコンテンツ
最初からJavaScriptまでまとめて考えると複雑に見えますが、まずは**「横に並んだカードを見るための枠を作る」**と考えると分かりやすくなります。
画像を使いたい場合は、.carousel-itemの中にimg要素を入れても構いません。
CSSでカードを横並びにする
次はCSSでカルーセルらしい見た目を作ります。
ポイントになるのは、Flexboxでカードを横並びにして、表示領域からはみ出した部分を横スクロールできるようにすることです。
display: flexでカードを並べる
基本のCSSはこちらです。
.carousel {
display: flex;
align-items: center;
gap: 16px;
max-width: 700px;
margin: 0 auto;
}
.carousel-list {
display: flex;
gap: 16px;
overflow-x: auto;
scroll-behavior: smooth;
}
.carousel-item {
flex: 0 0 250px;
padding: 60px 20px;
border: 1px solid #333;
text-align: center;
}.carousel-listにdisplay: flex;を指定することで、カードが横方向に並びます。
さらに重要なのが、
overflow-x: auto;です。
横幅に収まらないコンテンツを、横方向へスクロールできる状態にしています。
カードが縮まないようにする
.carousel-itemには、
flex: 0 0 250px;を指定しています。
Flexboxでは、何も指定しないと画面幅に合わせて要素が縮む場合があります。
今回はカルーセルとして横にはみ出させたいので、カードの幅を250pxに固定し、縮まないようにしています。
また、
scroll-behavior: smooth;を指定することで、JavaScriptからスクロールさせたときの移動が滑らかになります。
JavaScriptで左右にスクロールさせる
ここまででも、横方向へスクロールできるカルーセルになっています。
さらにJavaScriptを追加して、左右のボタンをクリックしたときにもカードを移動できるようにします。
次へ・前へボタンを取得する
まず、必要な要素をJavaScriptで取得します。
const carousel = document.querySelector('.carousel-list');
const prevButton = document.querySelector('.carousel-prev');
const nextButton = document.querySelector('.carousel-next');これで、カルーセル本体と左右のボタンをJavaScriptから操作できるようになります。
次にクリック時の処理を追加します。
nextButton.addEventListener('click', () => {
carousel.scrollBy({
left: 266,
behavior: 'smooth'
});
});
prevButton.addEventListener('click', () => {
carousel.scrollBy({
left: -266,
behavior: 'smooth'
});
});scrollBy()は、現在の位置から指定した距離だけスクロールするためのメソッドです。
正の値なら右方向、負の値なら左方向へ移動します。
カード1枚分ずつ移動させる
今回のカード幅は250px、カード同士のgapは16pxです。
そのため、
250px ＋ 16px ＝ 266px
ずつスクロールさせています。
カードサイズを変更した場合は、この数値も合わせて変更する必要があります。
より柔軟な実装ではJavaScriptからカード幅を取得する方法もありますが、最初はHTML・CSS・JavaScriptがどうつながっているのか理解することを優先すると分かりやすいです。
【まとめ】カルーセルは横並びとスクロールで作れる
カルーセルは複雑なUIに見えますが、基本的な仕組みを分解するとそれほど難しくありません。
今回の実装では、
- HTMLでカードと左右のボタンを作る
- CSSのFlexboxでカードを横並びにする
overflow-xで横スクロールできるようにする- JavaScriptの
scrollBy()で左右に移動させる
という構成になっています。
ここから自動再生や無限ループ、現在位置を示すドットなどを追加すると、カルーセルの仕組みは少しずつ複雑になります。
最初から機能を増やすより、まずは**「横に並べたコンテンツを必要な分だけ動かす」**という基本を理解しておくと、カスタマイズもしやすくなります。
また、カルーセルに入れた情報は最初からすべて見えているわけではありません。重要な情報まで必要以上に隠してしまわないよう、「なぜこのコンテンツをカルーセルにするのか」まで考えて使うことも大切です。