Carousel
Carousel
は、複数の要素をスライドショーのように表示するコンポーネントです。
インポート
pnpm add @yamada-ui/carousel
@yamada-ui/carousel
は、@yamada-ui/react
に含まれていないため、別途インストールする必要があります。
import {Carousel,CarouselSlide,CarouselControlNext,CarouselControlPrev,CarouselIndicators,} from "@yamada-ui/carousel"
Carousel
: 子要素(CarouselSlide
)を制御するラッパーコンポーネントです。CarouselSlide
: スライドを表示するコンポーネントです。CarouselControlNext
: 次のスライドを表示するボタンのコンポーネントです。CarouselControlPrev
: 前のスライドを表示するボタンのコンポーネントです。CarouselIndicators
: スライドの数や現在のスライドの位置を表示するコンポーネントです。
CarouselControlNext
, CarouselControlPrev
とCarouselIndicators
は、省略することができます。
使い方
Carousel
は、内部的にembla-carousel-reactを使用しています。
編集可能な例
<Carousel> <CarouselSlide as={Center} bg="primary"> 1 </CarouselSlide> <CarouselSlide as={Center} bg="secondary"> 2 </CarouselSlide> <CarouselSlide as={Center} bg="warning"> 3 </CarouselSlide> <CarouselSlide as={Center} bg="danger"> 4 </CarouselSlide> </Carousel>
サイズを指定する
編集可能な例
const sizeMap = ["sm", "md", "lg", "xl"] return ( <VStack> {sizeMap.map((size) => ( <Carousel key={size} size={size}> <CarouselSlide as={Center} bg="primary"> 1 </CarouselSlide> <CarouselSlide as={Center} bg="secondary"> 2 </CarouselSlide> <CarouselSlide as={Center} bg="warning"> 3 </CarouselSlide> <CarouselSlide as={Center} bg="danger"> 4 </CarouselSlide> </Carousel> ))} </VStack> )
方向を変更する
方向を変更する場合は、orientation
にhorizontal
またはvertical
を設定します。デフォルトでは、horizontal
が設定されています。
編集可能な例
<VStack> <Carousel orientation="horizontal"> <CarouselSlide as={Center} bg="primary"> 1 </CarouselSlide> <CarouselSlide as={Center} bg="secondary"> 2 </CarouselSlide> <CarouselSlide as={Center} bg="warning"> 3 </CarouselSlide> <CarouselSlide as={Center} bg="danger"> 4 </CarouselSlide> </Carousel> <Carousel orientation="vertical"> <CarouselSlide as={Center} bg="primary"> 1 </CarouselSlide> <CarouselSlide as={Center} bg="secondary"> 2 </CarouselSlide> <CarouselSlide as={Center} bg="warning"> 3 </CarouselSlide> <CarouselSlide as={Center} bg="danger"> 4 </CarouselSlide> </Carousel> </VStack>
デフォルトのスライドを選択する
デフォルトのスライドを選択する場合は、defaultIndex
にindex
を設定します。
編集可能な例
<Carousel defaultIndex={1}> <CarouselSlide as={Center} bg="primary"> 1 </CarouselSlide> <CarouselSlide as={Center} bg="secondary"> 2 </CarouselSlide> <CarouselSlide as={Center} bg="warning"> 3 </CarouselSlide> <CarouselSlide as={Center} bg="danger"> 4 </CarouselSlide> </Carousel>
スライド間を調整する
スライド間を調整する場合は、gap
に文字列または数値を設定します。デフォルトでは、1rem
が設定されています。
編集可能な例
<Carousel gap={0}> <CarouselSlide as={Center} bg="primary"> 1 </CarouselSlide> <CarouselSlide as={Center} bg="secondary"> 2 </CarouselSlide> <CarouselSlide as={Center} bg="warning"> 3 </CarouselSlide> <CarouselSlide as={Center} bg="danger"> 4 </CarouselSlide> </Carousel>
スライドが切り替わる所要時間を変更する
スライドが切り替わる所要時間を変更する場合は、duration
に数値を設定します。デフォルトでは、25
が設定されています。
編集可能な例
<Carousel duration={60}> <CarouselSlide as={Center} bg="primary"> 1 </CarouselSlide> <CarouselSlide as={Center} bg="secondary"> 2 </CarouselSlide> <CarouselSlide as={Center} bg="warning"> 3 </CarouselSlide> <CarouselSlide as={Center} bg="danger"> 4 </CarouselSlide> </Carousel>
スライドのサイズを変更する
スライドのサイズを変更する場合は、slideSize
に文字列または数値を設定します。デフォルトでは、100%
が設定されています。
もし、個別のスライドのサイズを変更する場合は、CarouselSlide
のsize
に値を設定します。
編集可能な例
<Carousel slideSize="50%"> <CarouselSlide as={Center} bg="primary"> 1 </CarouselSlide> <CarouselSlide as={Center} bg="secondary" size="100%"> 2 </CarouselSlide> <CarouselSlide as={Center} bg="warning"> 3 </CarouselSlide> <CarouselSlide as={Center} bg="danger"> 4 </CarouselSlide> </Carousel>
スライドの位置を変更する
スライドの位置を変更する場合は、align
にstart
, center
, end
または数値を設定します。デフォルトでは、center
が設定されています。
編集可能な例
<VStack> <Carousel slideSize="50%" align="center"> <CarouselSlide as={Center} bg="primary"> 1 </CarouselSlide> <CarouselSlide as={Center} bg="secondary"> 2 </CarouselSlide> <CarouselSlide as={Center} bg="warning"> 3 </CarouselSlide> <CarouselSlide as={Center} bg="danger"> 4 </CarouselSlide> </Carousel> <Carousel slideSize="50%" align="start"> <CarouselSlide as={Center} bg="primary"> 1 </CarouselSlide> <CarouselSlide as={Center} bg="secondary"> 2 </CarouselSlide> <CarouselSlide as={Center} bg="warning"> 3 </CarouselSlide> <CarouselSlide as={Center} bg="danger"> 4 </CarouselSlide> </Carousel> <Carousel slideSize="50%" align="end"> <CarouselSlide as={Center} bg="primary"> 1 </CarouselSlide> <CarouselSlide as={Center} bg="secondary"> 2 </CarouselSlide> <CarouselSlide as={Center} bg="warning"> 3 </CarouselSlide> <CarouselSlide as={Center} bg="danger"> 4 </CarouselSlide> </Carousel> </VStack>
スライドをスクロールする数を変更する
スライドをスクロールする数を変更する場合は、slidesToScroll
に数値を設定します。デフォルトでは、1
が設定されています。
編集可能な例
<Carousel slideSize="33.3%" slidesToScroll={3} loop={false}> <CarouselSlide as={Center} bg="primary"> 1 </CarouselSlide> <CarouselSlide as={Center} bg="secondary"> 2 </CarouselSlide> <CarouselSlide as={Center} bg="warning"> 3 </CarouselSlide> <CarouselSlide as={Center} bg="danger"> 4 </CarouselSlide> <CarouselSlide as={Center} bg="primary"> 5 </CarouselSlide> <CarouselSlide as={Center} bg="secondary"> 6 </CarouselSlide> <CarouselSlide as={Center} bg="danger"> 7 </CarouselSlide> <CarouselSlide as={Center} bg="primary"> 8 </CarouselSlide> <CarouselSlide as={Center} bg="secondary"> 9 </CarouselSlide> </Carousel>
自動再生を使う
自動再生を使う場合は、autoplay
をtrue
に設定します。
編集可能な例
<Carousel autoplay> <CarouselSlide as={Center} bg="primary"> 1 </CarouselSlide> <CarouselSlide as={Center} bg="secondary"> 2 </CarouselSlide> <CarouselSlide as={Center} bg="warning"> 3 </CarouselSlide> <CarouselSlide as={Center} bg="danger"> 4 </CarouselSlide> </Carousel>
自動再生の間隔を変更する
自動再生の間隔を変更する場合は、delay
に数値(ミリ秒)を設定します。デフォルトでは、4000
が設定されています。
編集可能な例
<Carousel autoplay delay={1000}> <CarouselSlide as={Center} bg="primary"> 1 </CarouselSlide> <CarouselSlide as={Center} bg="secondary"> 2 </CarouselSlide> <CarouselSlide as={Center} bg="warning"> 3 </CarouselSlide> <CarouselSlide as={Center} bg="danger"> 4 </CarouselSlide> </Carousel>
自動再生を停止しない
デフォルトでは、要素上にホバーされたとき自動再生は停止します。停止しない場合は、stopMouseEnterAutoplay
をfalse
に設定します。
編集可能な例
<Carousel autoplay stopMouseEnterAutoplay={false}> <CarouselSlide as={Center} bg="primary"> 1 </CarouselSlide> <CarouselSlide as={Center} bg="secondary"> 2 </CarouselSlide> <CarouselSlide as={Center} bg="warning"> 3 </CarouselSlide> <CarouselSlide as={Center} bg="danger"> 4 </CarouselSlide> </Carousel>
ドラッグフリーを使う
dragFree
をtrue
に設定することで、スライドを自由にドラッグすることができます。
編集可能な例
<Carousel dragFree> <CarouselSlide as={Center} bg="primary"> 1 </CarouselSlide> <CarouselSlide as={Center} bg="secondary"> 2 </CarouselSlide> <CarouselSlide as={Center} bg="warning"> 3 </CarouselSlide> <CarouselSlide as={Center} bg="danger"> 4 </CarouselSlide> </Carousel>
ループを無効にする
ループを無効にする場合は、loop
をfalse
に設定します。
編集可能な例
<Carousel loop={false}> <CarouselSlide as={Center} bg="primary"> 1 </CarouselSlide> <CarouselSlide as={Center} bg="secondary"> 2 </CarouselSlide> <CarouselSlide as={Center} bg="warning"> 3 </CarouselSlide> <CarouselSlide as={Center} bg="danger"> 4 </CarouselSlide> </Carousel>
ドラッグを無効にする
ドラッグを無効にする場合は、draggable
をfalse
に設定します。
編集可能な例
<Carousel draggable={false}> <CarouselSlide as={Center} bg="primary"> 1 </CarouselSlide> <CarouselSlide as={Center} bg="secondary"> 2 </CarouselSlide> <CarouselSlide as={Center} bg="warning"> 3 </CarouselSlide> <CarouselSlide as={Center} bg="danger"> 4 </CarouselSlide> </Carousel>
コントロールボタンを無効にする
コントロールボタンを無効にする場合は、withControls
をfalse
に設定します。
編集可能な例
<Carousel withControls={false}> <CarouselSlide as={Center} bg="primary"> 1 </CarouselSlide> <CarouselSlide as={Center} bg="secondary"> 2 </CarouselSlide> <CarouselSlide as={Center} bg="warning"> 3 </CarouselSlide> <CarouselSlide as={Center} bg="danger"> 4 </CarouselSlide> </Carousel>
コントロールボタンをカスタマイズする
コントロールボタンをカスタマイズする場合は、controlProps
やcontrolPrevProps
にprops
を設定するか、CarouselControlPrev
またはCarouselControlNext
を使用します。
編集可能な例
<VStack> <Carousel controlProps={{ icon: <GhostIcon /> }}> <CarouselSlide as={Center} bg="primary"> 1 </CarouselSlide> <CarouselSlide as={Center} bg="secondary"> 2 </CarouselSlide> <CarouselSlide as={Center} bg="warning"> 3 </CarouselSlide> <CarouselSlide as={Center} bg="danger"> 4 </CarouselSlide> </Carousel> <Carousel controlPrevProps={{ icon: <ArrowLeftIcon /> }}> <CarouselSlide as={Center} bg="primary"> 1 </CarouselSlide> <CarouselSlide as={Center} bg="secondary"> 2 </CarouselSlide> <CarouselSlide as={Center} bg="warning"> 3 </CarouselSlide> <CarouselSlide as={Center} bg="danger"> 4 </CarouselSlide> </Carousel> <Carousel controlNextProps={{ icon: <ArrowRightIcon /> }}> <CarouselSlide as={Center} bg="primary"> 1 </CarouselSlide> <CarouselSlide as={Center} bg="secondary"> 2 </CarouselSlide> <CarouselSlide as={Center} bg="warning"> 3 </CarouselSlide> <CarouselSlide as={Center} bg="danger"> 4 </CarouselSlide> </Carousel> <Carousel> <CarouselControlPrev icon={<ArrowLeftIcon />} /> <CarouselControlNext icon={<ArrowRightIcon />} /> <CarouselSlide as={Center} bg="primary"> 1 </CarouselSlide> <CarouselSlide as={Center} bg="secondary"> 2 </CarouselSlide> <CarouselSlide as={Center} bg="warning"> 3 </CarouselSlide> <CarouselSlide as={Center} bg="danger"> 4 </CarouselSlide> </Carousel> </VStack>
インジケーターを無効にする
インジケーターを無効にする場合は、withIndicators
をfalse
に設定します。
編集可能な例
<Carousel withIndicators={false}> <CarouselSlide as={Center} bg="primary"> 1 </CarouselSlide> <CarouselSlide as={Center} bg="secondary"> 2 </CarouselSlide> <CarouselSlide as={Center} bg="warning"> 3 </CarouselSlide> <CarouselSlide as={Center} bg="danger"> 4 </CarouselSlide> </Carousel>
インジケーターをカスタマイズする
インジケーターをカスタマイズする場合は、indicatorsProps
にprops
を設定するか、CarouselIndicators
を使用します。
編集可能な例
<VStack> <Carousel indicatorsProps={{ bottom: "8", component: ({ isSelected }) => ( <GhostIcon color={isSelected ? "whiteAlpha.700" : "whiteAlpha.400"} cursor="pointer" /> ), }} > <CarouselSlide as={Center} bg="primary"> 1 </CarouselSlide> <CarouselSlide as={Center} bg="secondary"> 2 </CarouselSlide> <CarouselSlide as={Center} bg="warning"> 3 </CarouselSlide> <CarouselSlide as={Center} bg="danger"> 4 </CarouselSlide> </Carousel> <Carousel> <CarouselSlide as={Center} bg="primary"> 1 </CarouselSlide> <CarouselSlide as={Center} bg="secondary"> 2 </CarouselSlide> <CarouselSlide as={Center} bg="warning"> 3 </CarouselSlide> <CarouselSlide as={Center} bg="danger"> 4 </CarouselSlide> <CarouselIndicators sx={{ "& > *": { w: "4", _selected: { w: "12" }, transitionProperty: "width", transitionDuration: "slower", }, }} /> </Carousel> </VStack>
イベントをハンドルする
ユーザーのドラッグなどのイベントをハンドルしたい場合は、watchDrag
を使用します。
編集可能な例
<Carousel watchDrag={(methods, ev) => { console.log("drag", methods, ev) return true }} watchResize={(methods, entries) => { console.log("resized", methods, entries) return true }} watchSlides={(methods, mutations) => { console.log("slides updated", methods, mutations) return true }} > <CarouselSlide as={Center} bg="primary"> 1 </CarouselSlide> <CarouselSlide as={Center} bg="secondary"> 2 </CarouselSlide> <CarouselSlide as={Center} bg="warning"> 3 </CarouselSlide> <CarouselSlide as={Center} bg="danger"> 4 </CarouselSlide> </Carousel>
制御する
編集可能な例
const [index, onChange] = useState<number>(0) return ( <Carousel draggable={false} index={index} onChange={onChange}> <CarouselSlide as={Center} bg="primary"> 1 </CarouselSlide> <CarouselSlide as={Center} bg="secondary"> 2 </CarouselSlide> <CarouselSlide as={Center} bg="warning"> 3 </CarouselSlide> <CarouselSlide as={Center} bg="danger"> 4 </CarouselSlide> </Carousel> )
onScrollProgress
を使用して、現在のスクロール量にアクセスできます。
編集可能な例
const [value, onScrollProgress] = useState<number>(0) return ( <> <Carousel loop={false} dragFree onScrollProgress={onScrollProgress}> <CarouselSlide as={Center} bg="primary"> 1 </CarouselSlide> <CarouselSlide as={Center} bg="secondary"> 2 </CarouselSlide> <CarouselSlide as={Center} bg="warning"> 3 </CarouselSlide> <CarouselSlide as={Center} bg="danger"> 4 </CarouselSlide> </Carousel> <Progress value={value} colorScheme="gray" /> </> )
GitHubでこのページを編集する