カルーセルを作る React TS, react-multi-carousel

1月 6, 2025

—

コイアイちゃん

in React

カルーセルを作る方法についてのコードです。

Joy UI, react-multi-carousel を使って実装しました。

Joy UI のインストール

Swiperの公式ドキュメントはこちらから。https://swiperjs.com

yarn add swiper

Joy UI はこちらから。個人的な意見恐縮ですが、MUIよりも手軽に使えることから Joy UI を好んで使っています。
↓ get start はこちらから
https://mui.com/joy-ui/getting-started/

yarn add @mui/joy @emotion/react @emotion/styled

カードのスタイルを作る Joy UI

なんでもいいのですが、とりあえずカードのスタイルを作ります。
Joy UI を使用しているので適宜インポートしてください。

        {/* Section Member Staff */}
        <Box sx={{ p: 2, maxWidth: '880px', margin: 'auto', my: 10 }}>
          <Box sx={{ mb: 2 }}>
            <Typography level='h2' sx={{mb: 1}}>施術師</Typography>
            <Typography>スタッフ情報をご紹介します。</Typography>
          </Box>
          <Card sx={{ width: 320, maxWidth: '100%', boxShadow: 'lg' }}>
            <CardOverflow>
              <AspectRatio ratio={1 / 1}>
                <img src="/static/images/avatar/1.jpg" alt="Staff" loading='lazy' />
              </AspectRatio>
            </CardOverflow>
            <CardContent>
              <Typography level="body-sm" >代表</Typography>
              <Typography level="title-lg" >スタッフ名</Typography>
              <Typography level='body-sm'>鍼灸師・柔道整復師</Typography>
            </CardContent>
          </Card>
        </Box>

このような感じでスタイリングしました。

一例です。

react-multi-carousel でカルーセルを実装

react-multi-carousel とは何か？

簡単にReactのプロジェクトにカルーセルを実装できるコンポーネントです。

アニメーション対応
レスポンシブ対応

なのが特に嬉しい点に思いました。

やり方

↓ 以下のドキュメントに従って使えばOK
https://www.npmjs.com/package/react-multi-carousel

インポートして<Carousel>で囲むだけですぐに動作するので簡単で素敵

とりあえず最小構成で組んでみましたが、下記ページに作例がたくさん紹介されているので、よりリッチにしたい方は CodeSandbox を見るのが良さそう。

https://codesandbox.io/examples/package/react-multi-carousel

react-multi-carousel の使い方の簡単な解説

コメントアウト付きでオプションの解説をメモしておきました。

// 必要なライブラリをインポート
import React from 'react';
import CarouselLibrary from 'react-multi-carousel'; // カルーセル用のライブラリ
import 'react-multi-carousel/lib/styles.css'; // カルーセルのスタイルシート

// デバイスごとの表示設定を定義
const deviceSettings = {
  desktop: {
    breakpoint: { max: 3000, min: 1024 }, // デスクトップ用の画面幅の範囲
    items: 3, // 一度に表示するアイテム数
    slidesToSlide: 3, // 一度にスライドするアイテム数
  },
  tablet: {
    breakpoint: { max: 1024, min: 464 }, // タブレット用の画面幅の範囲
    items: 2,
    slidesToSlide: 2,
  },
  mobile: {
    breakpoint: { max: 464, min: 0 }, // モバイル用の画面幅の範囲
    items: 1,
    slidesToSlide: 1,
  },
};

// カルーセルコンポーネントの定義
const GeneralCarousel = () => {
  return (
    // CarouselLibraryコンポーネントを使用
    <CarouselLibrary
      swipeable={false} // スワイプ操作を無効化
      draggable={false} // ドラッグ操作を無効化
      showDots={true} // 下部にページング用のドットを表示
      responsive={deviceSettings} // デバイスごとの設定を適用
      ssr={true} // サーバーサイドレンダリングを有効化
      infinite={true} // 無限スクロールを有効化
      autoPlay={true} // 自動再生を有効化
      autoPlaySpeed={3000} // 自動再生の速度を設定（3秒間隔）
      keyBoardControl={true} // キーボード操作を有効化
      customTransition="all .5" // カスタムの遷移アニメーション（0.5秒）
      transitionDuration={500} // 遷移のアニメーション時間を設定
      containerClass="carousel-container" // カスタムスタイルを適用するためのコンテナクラス
      removeArrowOnDeviceType={["tablet", "mobile"]} // 特定のデバイスで矢印を非表示
      dotListClass="custom-dot-list-style" // ドットのカスタムスタイルクラス
      itemClass="carousel-item-padding-40-px" // アイテムの間隔スタイル
    >
      {/* 表示するアイテムを定義 */}
      <div>Content 1</div>
      <div>Content 2</div>
      <div>Content 3</div>
      <div>Content 4</div>
      <div>Content 5</div>
    </CarouselLibrary>
  );
};

// コンポーネントをエクスポート
export default GeneralCarousel;

以上のコードで div タグの部分を先ほど作ったカードに置き換えれば、カードをカルーセルで動作させることができます。