Carousel

Carouselは、複数の要素をスライドショーのように表示するコンポーネントです。

インポート

pnpm add @yamada-ui/carousel

Copied!

@yamada-ui/carouselは、@yamada-ui/reactに含まれていないため、別途インストールする必要があります。

import {
  Carousel,
  CarouselSlide,
  CarouselControlNext,
  CarouselControlPrev,
  CarouselIndicators,
} from "@yamada-ui/carousel"

Copied!

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>

Copied!

サイズを指定する

編集可能な例

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>
)

Copied!

方向を変更する

方向を変更する場合は、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>

Copied!

デフォルトのスライドを選択する

デフォルトのスライドを選択する場合は、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>

Copied!

スライド間を調整する

スライド間を調整する場合は、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>

Copied!

スライドが切り替わる所要時間を変更する

スライドが切り替わる所要時間を変更する場合は、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>

Copied!

スライドのサイズを変更する

スライドのサイズを変更する場合は、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>

Copied!

スライドの位置を変更する

スライドの位置を変更する場合は、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>

Copied!

スライドをスクロールする数を変更する

スライドをスクロールする数を変更する場合は、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>

Copied!

自動再生を使う

自動再生を使う場合は、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>

Copied!

自動再生の間隔を変更する

自動再生の間隔を変更する場合は、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>

Copied!

自動再生を停止しない

デフォルトでは、要素上にホバーされたとき自動再生は停止します。停止しない場合は、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>

Copied!

ドラッグフリーを使う

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>

Copied!

ループを無効にする

ループを無効にする場合は、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>

Copied!

ドラッグを無効にする

ドラッグを無効にする場合は、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>

Copied!

コントロールボタンを無効にする

コントロールボタンを無効にする場合は、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>

Copied!

コントロールボタンをカスタマイズする

コントロールボタンをカスタマイズする場合は、controlPropsやcontrolPrevPropsにpropsを設定するか、CarouselControlPrevまたはCarouselControlNextを使用します。

編集可能な例

<VStack>
  <Carousel controlProps={{ icon: <Ghost /> }}>
    <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: <ArrowLeft /> }}>
    <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: <ArrowRight /> }}>
    <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={<ArrowLeft />} />
    <CarouselControlNext icon={<ArrowRight />} />

    <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>

Copied!

インジケーターを無効にする

インジケーターを無効にする場合は、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>

Copied!

インジケーターをカスタマイズする

インジケーターをカスタマイズする場合は、indicatorsPropsにpropsを設定するか、CarouselIndicatorsを使用します。

編集可能な例

<VStack>
  <Carousel
    indicatorsProps={{
      bottom: "8",
      component: ({ isSelected }) => (
        <Ghost
          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>

Copied!

イベントをハンドルする

ユーザーのドラッグなどのイベントをハンドルしたい場合は、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>

Copied!

制御する

編集可能な例

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>
)

Copied!

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" />
  </>
)

Copied!

GitHubでこのページを編集する

前RadialChart 次Reorder