Mantineでインジケーターつきカルーセルを実装 - ハウテレビジョン技術ブログ

はじめに

外資就活ドットコムの開発をしている川原です。
最近MantineのCarouselを使いカルーセルUIを実装したので紹介します。

紹介

MantineのCarouselはEmblaを追加することで機能を拡張できます。

Carousel

mantine.dev

Carouselの依存ライブラリ

www.embla-carousel.com

環境

node: v20.11.1
pnpm: 8.15.6

MantineのCarouselライブラリと拡張の際に依存しているEmblaのembla-carousel-reactとembla-carousel-autoplayをインストールします。

npm install @mantine/core @mantine/carousel embla-carousel-react@^7.1.0 embla-carousel-autoplay@^7.1.0

実装例

以下はカルーセルを自動で遷移させるプラグインを使った例です。

あらかじめ、表示用の画像URLを持たせたカルーセルデータをslidesという変数として持たせておきます。
以下はインジケーター付きの自動遷移するカルーセルコンポーネントの例です

import { useMemo, useRef } from 'react';
import { Box } from '@mantine/core';
import { Carousel } from '@mantine/carousel';
import Autoplay from 'embla-carousel-autoplay';

const SimpleCarousel = ({ slides }) => {
  const autoplay = useRef(Autoplay({ delay: 2000 }));
  const plugins = useMemo(() => [autoplay.current], []);

  return (
    <Carousel
      height={300}
      slideSize={'100%'}
      align={'start'}
      loop
      dragFree
      withIndicators // インジケーター追加設定
      plugins={plugins} // 自動遷移プラグイン追加設定
      initialSlide={0}
      onMouseEnter={autoplay.current.stop}
      onMouseLeave={autoplay.current.reset}
    >
      {slides.map((slide, index) => (
        <Carousel.Slide key={index}>
          <Image
            src={slide.imageURL}
            width={100}
            height={100}
            alt={`caroucel-${index}`}
            className="object-cover"
          />
          <div className="absolute w-full bottom-0 bg-white bg-opacity-90 p-16">
            <p className="text-md text-black font-bold text-wrap  work-wrap line-clamp-2">
              {slide.name}
            </p>
            <p className="text-black-1 text-sm">
              {slide.text}
            </p>
          </div>
        </Carousel.Slide>
      ))}
    </Carousel>
  );
};

自動遷移について

Autoplayプラグインを使用することでカルーセルの指定時間毎の自動遷移を加えています。また、onMouseEnterでホバー時に遷移を停止するするようにしています。

カルーセルのスタイルのカスタマイズ

カルーセルのインジケーター部分について、デフォルトだと以下のような表示になっています。

カルーセルのインジケーター部分にカスタムスタイルを当てる場合、MantineのCarouselのStyles APIで定義します。以下は例です。

  <Carousel
    ...
    styles={{
      indicators: {
        padding: '4px 0',
        gap: '0',
        position: 'sticky',
        flexWrap: 'wrap',
        width: '100%',
        height: '120px',
      },
      indicator: {
        backgroundSize: 'cover',
        borderRadius: '50%',
        width: '60px',
        height: '60px',
        border: 'none',
        marginRight: '2px',
        marginLeft: '2px',
        backgroundPosition: 'center',
      },
    }}

選択されているインジケーター要素へのスタイルを直接指定します

<Head>
  <style>
    {`
      .mantine-Carousel-indicator[data-active] {
        border: 2px solid #007bff;
      }
    `}
  </style>
</Head>

上記のスタイルでインジケータのスタイルを適用させました。適用後は以下のように表示変更されます。

最後に

今回はMantineのCarouselコンポーネントとEmblaを使った自動遷移、インジケーター付きのカルーセルUIの実装例でした。

カルーセルUIを1から作ると工数が多くなりますが、ライブラリを使用することで基本的なUIを簡単に作成できます。一般的なカルーセルのユースケースは今回紹介したライブラリでカバーされているので、Mantineをプロジェクトに採用することでフロントエンドの実装コストを抑えることができます。

MantineとEmblaを組み合わせることで、フロントエンドの開発がスムーズに進むだけでなく、メンテナンスも容易になります。ぜひプロジェクトに取り入れてみてください。