Embla Carousel を Next.js で利用する

Web サイトのトップページやナビゲーションなどで利用されるスライドするコンポーネント、Carousel を Next.js App Router に実装します。今回は、Embra Carousel を利用します。

プロジェクトの作成

まず最初に、Next.js のプロジェクトを作成します。

スタイルのファイルを src/styles のフォルダを作成して globals.css を作成したフォルダに移動をします。そしてこのファイルを参照している src/app/layout.tsx のファイルの import を以下のように書き換えます。

src/app/layout.tsx

変更後、サンプルのページが表示されるか確認をしてください。

これで準備ができました。

Embla Carousel のインストール

React だけでなく、Vanilla いわゆる素の環境でも利用できるパッケージである Embla Carousel のパッケージを今回は利用します。このパッケージは非常に軽量に動くこともあり、利用実績も豊富です。

Embla Carousel

まずは簡単なサンプルが動くところまで進めてみます。

画像を用意する

サンプルが動いているのがわかるように、画像を用意します。今回は、unsplush を利用して、３つの画像を public の下に追加しました。猫の写真です。

パッケージのインストール

Embla Carousel のパッケージをインストールしていきます。今回は、オートプレイの機能も追加するため、２つのパッケージをインストールします。

これで Embla Carousel を利用できるようになりました。

コンポーネントを作成する

Embla Carousel のサイトのサンプルのコードを参考にしながら、今回は以下のようなコンポーネントを作成しました。public にコピーをした画像を利用して、カルーセルとして動作する形となります。

src/components/Carousel.tsx

このページで利用しているスタイルシートとして、src/styles/carousel.css のファイルを作成して、以下のようにスタイルを指定します。

src/styles/carousel.css

このスタイルを利用できるように、globals.css のファイルで読み込みますが、サンプルで提供されているコードをこの機会に削除します。

src/styles/globals.css

カルーセルを利用する

利用する準備ができました。まず、トップページでコンポーネントを利用します。

src/app/page.tsx

ついでに layout.tsx のファイルもサンプルのコードを削除します。

src/app/layout.tsx

これで準備ができました。実行します。

画像がスライドで定期的に切り替わるようになります。

カルーセルの実装ができました。

ボタンの追加

現在は自動的に切り替わるだけとなっていますが、もう少し凝った形で左右のボタンを追加して、クリックをしたら前後に切り替える形として変更をします。

まずアイコンは Lucide Icons を利用します。

Lucide

パッケージをインストールしてください。

これでアイコンが利用できるようになります。Carousel のコンポーネントを以下のように書き換えます。

src/components/Carousel.tsx

続いてスタイルシートを以下のように変更をします。

src/styles/carousel.css

変更後、以下のようにボタンが追加されます。

まとめ

今回は Embla Carousel のパッケージを利用して、カルーセルのコンポーネントを作成しました。サムネイルを表示してクリックしたら切り替える、という実装も可能です。詳しくは Embla Carousel の公式サイト、もしくは各種 Tips をご覧ください。

今回のサンプルをもとに、表示されているスライドをクリックしたらページが遷移する、CMS で管理しているカルーセルのデータと連携するといった実装が可能なため、このベースとなる部分をまずは理解しておきましょう。