Next.jsでカルーセルを実装する

komosyu2023.03.04

はじめに

今回は React でのカルーセル実装について解説していこうと思います！
これまで React を使わない実装でもお世話になってきた Swiper というライブラリを使っての実装となります。
こうした使い馴染みのあるライブラリが React にも対応されているのは非常に助かりますね。

Swiper について知ろう

Web 制作の経験がある方なら一度は使ったことがあるという方は多いとは思いますが、一応簡単に Swiper について説明をしていこうと思います。

公式のサイトを見ていただければわかる話ではあるのですが、個人的には以下の点に魅力を感じて使わせてもらっています。

重くない
利用者が多く詰まった時に情報が出てきやすい
API が豊富で欲しい機能がだいたい用意されている
演出・表現のパターンも多く用意されている
デモとソースコードが用意されていて優しい
React や Vue にも対応

といった感じで、たいていのことはできてしまうので特に複雑な仕様を求められていないのであれば、とりあえず Swiper で実現できてしまいます。

そして、Next.js でカルーセルを実装をする際にもライブラリを探していたところ、使い馴染みのある Swiper が React にも対応しているということで Next.js で実装する際にも取り入れてみることにしました！

公式で用意されているデモを使えるようにある

先ほども取り上げたように、React では複数パターンのデモが用意されており、ソースコードもその中から React や Vue などを選択して見ることができます。

公式のデモページ画面

React というリンクをクリックすると、React を使った場合のソースコードと画面を codesandbox で見ることができます。

codsandboxの画面

まずはこの中でどこをどう動かすと何ができるのか？ということを触りながら試してみるといいでしょう！

基本的な使い方

それでは、実際に React の中で Swiper を使ってみましょう！

今回はBasicSwiperというコンポーネントをつくってみました。
難しいことは特にない本当にベーシックなカルーセルになっています。

import React from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
import style from './BaseSwiper.module.scss'
// swiper用のcssをimportします
import 'swiper/css'

export const BasicSwiper: React.FC = ({
  spaceBetween,
  slidesPerView,
  contents,
}) => {
  return (
    <div className={style.container}>
      <Swiper
        // SwiperSlide間のスペースはどのくらい空ける？
        spaceBetween={spaceBetween}
        // SwiperSlideはページ内に何枚表示させる？
        slidesPerView={slidesPerView}
      >
        {contents.map((content) => (
          <SwiperSlide key={content.id}>{content.name}</SwiperSlide>
        ))}
      </Swiper>
    </div>
  )
}

まず、流れとしてはnpm i swiperでswiper/reactをインストールするところからです。

そうすることで、Swiper, SwiperSlideが使えるようになります。
上記コードを見るとわかりますが、Swiperが親要素としてspaceBetweenやslidesPerViewといったこのカルーセル全体の情報を受け取ることができます。
そして、中身はSwiperSlideで囲むことで作成できてとっても簡単ですね。

ちなみに、propsを渡す方はこんな感じになります。

<BasicSwiper spaceBetween={15} slidesPerView={2.5} contents={contents} />

今回はサンプルでつくってみましたが、他にもたくさんの API が用意されているので仕様やデザインに応じて使い分けてみてください！s

ナビゲーションなどの機能を使いたい時

先ほどは基本的な Swiper の使い方を説明してきましたが、ナビゲーションやページネーションを利用する際には多少書き方が異なるので、少しだけ補足として付け足しておきます。

例えばナビゲーションを追加したい場合は以下のようにします。

import React from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
// swiperからNavigationを呼び出す
import { Navigation } from 'swiper'
import style from './BaseSwiper.module.scss'
import 'swiper/css'

export const BasicSwiper: React.FC = ({
  spaceBetween,
  slidesPerView,
  contents,
}) => {
  return (
    <div className={style.container}>
      <Swiper
        // modulesの配列の中にNavigationを入れておく
        modules={[Navigation]}
        // navigationの設定をする
        navigation={{
          prevEl: 'swiper_prev',
          nextEl: 'swiper_next',
        }}
        spaceBetween={spaceBetween}
        slidesPerView={slidesPerView}
      >
        {contents.map((content) => (
          <SwiperSlide key={content.id}>{content.name}</SwiperSlide>
        ))}
      </Swiper>
    </div>
  )
}

といった感じで、swiper の中からNavigationを呼び出して、それをSwiperの中のmodulesに登録して実際にnavigationを使うことで使用できるようになります。

参考

さいごに

多少書き方が違うくらいで、Swiper を使ったことがあれば感覚的に理解しやすくて助かりますね。

あと、すべて js で完結するのでこれまでのように html と js を行き来しながら実装するよりもかなりシンプルに対応できて楽チンできるも嬉しいですね。 Next.js でカルーセル実装するのどうしよう？と悩んだらぜひ一度試してみてはいかがでしょうか？