はじめに
現在取り組んでいるプロジェクトで初めてCarouselを作ることになったので、
Mantineを使って簡単にCarouselを触れてみました。
概要
Mantine
Mantineは、Reactをベースにした軽量なUIコンポーネントフレームワークです。 100種類以上のカスタマイズ可能なコンポーネントと50以上の便利なhooksが用意されています。
Carousel
https://www.irasutoya.com/2013/12/blog-post_317.html
Carouselとは、回転台、回転木馬、回転コンベア、回転棚などの意味を持つ英単語のことです。
Webページにおいては、複数の画像などのコンテンツを左右に移動して切り替えられる領域を指します。
メリーゴーラウンドのように回転する動きからCarouselと呼ばれています。
Carouselは、Mantine UIライブラリの一部であり、Reactベースのウェブ開発において簡単に使用できるカルーセル（スライダー）コンポーネントです。
Carouselコンポーネントを使用することで、異なるコンテンツを視覚的に引き立てながら、効果的に表示することができます。
環境準備
yarn add embla-carousel-react@^7.3.2 @mantine/carousel
まずCarouselを使うためにインストール
使い方
import { Carousel } from '@mantine/carousel';
function page() {
return (
<Carousel
withIndicators
height={200}
slideSize="33.333333%"
slideGap="md"
loop
align="start"
slidesToScroll={3}
>
<Carousel.Slide>1</Carousel.Slide>
<Carousel.Slide>2</Carousel.Slide>
<Carousel.Slide>3</Carousel.Slide>
{/* ...カルーセルの追加*/}
</Carousel>
);
}
CarouselのコンポーネントにslideSizeとslideGapを設定し、
各スライドのサイズとギャップを制御します。
コンポーネント
Carouselにはコンポーネントに複数のpropsを設定することができます。
withIndicators
boolean
インジケーター(下に表示される点線)を表示するかどうかを決定します。デフォルトでは false
- trueの場合
- falseの場合
height
Height<string | number>
コンテナの高さを調整します
slideSize
StyleProp<string | number>
スライドの幅を制御します。デフォルトでは100%
slideGap
<MantineSpacing>
スライド間のギャップを設定する数値
loop
boolean
スライドの内容がループするのに十分でない場合は自動的にfalseに戻ります。
デフォルトではtrue
- trueの場合
- falseの場合
align
number|"center"|"end"|"start"
スライドをコンテナに対してどのように整列させるかを決定します。
0.5が50%で、デフォルトは"center"
- center
- end
- start
slidesToScroll
number|"auto"
次/前ボタンでスクロールされるスライドの数。デフォルトでは1
上記のコードに載っていないのですが他のpropsも紹介します
dragFree
boolean
スクロール間で停止の設定する
デフォルトでは false
- trueの場合
- falseの場合
draggable
boolean
カルーセルがマウスやタッチ操作でスクロールできるかどうかを決定します。
デフォルトでは true
- trueの場合
- falseの場合
使用例
import { Carousel } from "@mantine/carousel";
import { Paper } from "@mantine/core";
export const CarouselComponent = () => {
const colorList = ["red", "blue", "lime", "orange", "pink", "skyblue"];
return (
<Carousel
slideSize="40%"
breakpoints={[{ maxWidth: "sm", slideSize: "100%", slideGap: 2 }]}
slideGap="xl"
align="start"
>
{colorList.map((color) => {
return (
<Carousel.Slide key={color}>
<Paper
p="xl"
m="sm"
radius="md"
sx={{ backgroundColor: color }}
style={{ height: "200px" }}
/>
</Carousel.Slide>
);
})}
</Carousel>
);
Mantine/coreにあるPaperをインポートし、
Carouselと一緒にを表示してみました。
{colorList.map((color) => {
return (
<Carousel.Slide key={color}>
<Paper
p="xl"
m="sm"
radius="md"
sx={{ backgroundColor: color }}
style={{ height: "200px" }}
/>
</Carousel.Slide>
);
})}
配列colorListの各色をCarousel.Slide内でPaperコンポーネントのbackgroundColorとして使用され、
各スライドの背景色として表示されます。
まとめ
- Carouselを使うことでコンテンツの切り替えが滑らかで視覚的に魅力的になる
- Mantine UIの一部であるため、他のMantineコンポーネントとの統合がスムーズになり、一貫性のあるデザインやスタイルを保ちながら、ウェブアプリケーションやサイトにカルーセルを容易に組み込むことができる。
Discussion