カルーセルを作る方法についてのコードです。
Joy UI, react-multi-carousel を使って実装しました。
Joy UI のインストール
Swiperの公式ドキュメントはこちらから。https://swiperjs.com
yarn add swiperJoy 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 タグの部分を先ほど作ったカードに置き換えれば、カードをカルーセルで動作させることができます。
そのほかのコンポーネント
Swiper
https://swiperjs.com
こちらも試してみました。
<Swiper>の子要素に<SwiperSlide>を置くだけでシンプルに使い始められることが利点だと感じました。
また、デモも豊富でリッチなカルーセルを構築できるように思います。
個人的な使用感として、カラム同士のスペースの取り方が使いづらく感じて辞めました。
