【Next.js】画像カルーセルの作り方を解説

公開日: 2026年9月12日 · 読了目安 9 分

Next.js で商品や作品の画像カルーセルを組む方法。自前・Embla・完成ギャラリーの使い分け。自動再生とアクセシビリティの注意。

先に結論：枚数が少ないならカルーセルにしない

3枚までならグリッドの方が、全部見えます。カルーセルは、4枚以上を同じ枠に収めたいときです。スクロールで作品が切り替わるギャラリーとは別物です。ギャラリーは https://design-layer.com/articles/nextjs-scroll-gallery-guide です。

作り方は3つです。snap 付きの横スクロール。Embla などのライブラリ。完成しているカルーセルを載せる。

自動再生は、停止手段が先です。商品写真なら、ユーザーが送る方が売れます。

1つ目は、次へボタンが写真に埋もれることです。コントラストを確保します。

2つ目は、タッチスワイプが効かないことです。モバイルでは必須です。

3つ目は、画像の高さがバラバラなことです。枠の高さを固定します。

flex overflow-x-auto snap-x snap-mandatory で足ります。依存は増えません。ドットは、今の枚数を aria-current で示します。

ループ、ドラッグの慣性、サムネ連動が要るならライブラリです。バンドルとアクセシビリティを確認してください。

Next.js では動的 import し、カルーセルだけクライアントにします。

ピン留めしながら切り替わる作品列は、通常のカルーセルでは再現できません。まずライブで動きを見て、種類を決めてください。

DesignLayer のカタログは閲覧無料です。https://design-layer.com/components

無料コピーは1日3回です。

1. 前へ次へがキーボードで使えるか。2. 画像に意味のある alt があるか。3. 自動再生を止められるか。4. LCP の1枚目が遅延読み込みされていないか。