Carousel

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

const sources = useMemo(
  () => [
    "https://www.ghibli.jp/gallery/chihiro015.jpg",
    "https://www.ghibli.jp/gallery/howl049.jpg",
    "https://www.ghibli.jp/gallery/totoro036.jpg",
    "https://www.ghibli.jp/gallery/mononoke033.jpg",
    "https://www.ghibli.jp/gallery/laputa047.jpg",
    "https://www.ghibli.jp/gallery/porco025.jpg",
  ],
  [],
)

return (
  <Carousel.Root>
    <Carousel.List>
      {sources.map((src, index) => (
        <Carousel.Item key={index} index={index}>
          <Image
            src={src}
            alt="スタジオジブリ作品静止画"
            boxSize="full"
            objectFit="cover"
          />
        </Carousel.Item>
      ))}
    </Carousel.List>

    <Carousel.PrevTrigger />
    <Carousel.NextTrigger />

    <Carousel.Indicators />
  </Carousel.Root>
)

使い方

import { Carousel } from "@yamada-ui/react"

import { Carousel } from "@/components/ui"

import { Carousel } from "@workspaces/ui"

<Carousel.Root>
  <Carousel.List>
    <Carousel.Item />
  </Carousel.List>
  <Carousel.PrevTrigger />
  <Carousel.NextTrigger />
  <Carousel.Indicators>
    <Carousel.Indicator />
  </Carousel.Indicators>
</Carousel.Root>

Carouselは、内部でembla-carousel-reactを使用しています。

サイズを変更する

const sources = useMemo(
  () => [
    "https://www.ghibli.jp/gallery/chihiro015.jpg",
    "https://www.ghibli.jp/gallery/howl049.jpg",
    "https://www.ghibli.jp/gallery/totoro036.jpg",
    "https://www.ghibli.jp/gallery/mononoke033.jpg",
    "https://www.ghibli.jp/gallery/laputa047.jpg",
    "https://www.ghibli.jp/gallery/porco025.jpg",
  ],
  [],
)

return (
  <VStack>
    <For each={["sm", "md", "lg"]}>
      {(size, key) => (
        <Carousel.Root key={key} size={size}>
          <Carousel.List>
            {sources.map((src, index) => (
              <Carousel.Item key={index} index={index}>
                <Image
                  src={src}
                  alt="スタジオジブリ作品静止画"
                  boxSize="full"
                  objectFit="cover"
                />
              </Carousel.Item>
            ))}
          </Carousel.List>

          <Carousel.PrevTrigger />
          <Carousel.NextTrigger />

          <Carousel.Indicators />
        </Carousel.Root>
      )}
    </For>
  </VStack>
)

カラースキームを変更する

const sources = useMemo(
  () => [
    "https://www.ghibli.jp/gallery/chihiro015.jpg",
    "https://www.ghibli.jp/gallery/howl049.jpg",
    "https://www.ghibli.jp/gallery/totoro036.jpg",
    "https://www.ghibli.jp/gallery/mononoke033.jpg",
    "https://www.ghibli.jp/gallery/laputa047.jpg",
    "https://www.ghibli.jp/gallery/porco025.jpg",
  ],
  [],
)

return (
  <VStack>
    <For each={["success", "warning"]}>
      {(colorScheme, key) => (
        <Carousel.Root key={key} colorScheme={colorScheme}>
          <Carousel.List>
            {sources.map((src, index) => (
              <Carousel.Item key={index} index={index}>
                <Image
                  src={src}
                  alt="スタジオジブリ作品静止画"
                  boxSize="full"
                  objectFit="cover"
                />
              </Carousel.Item>
            ))}
          </Carousel.List>

          <Carousel.PrevTrigger />
          <Carousel.NextTrigger />

          <Carousel.Indicators />
        </Carousel.Root>
      )}
    </For>
  </VStack>
)

方向を変更する

方向を変更する場合は、orientationに"horizontal"または"vertical"を設定します。デフォルトでは、"horizontal"が設定されています。

const sources = useMemo(
  () => [
    "https://www.ghibli.jp/gallery/chihiro015.jpg",
    "https://www.ghibli.jp/gallery/howl049.jpg",
    "https://www.ghibli.jp/gallery/totoro036.jpg",
    "https://www.ghibli.jp/gallery/mononoke033.jpg",
    "https://www.ghibli.jp/gallery/laputa047.jpg",
    "https://www.ghibli.jp/gallery/porco025.jpg",
  ],
  [],
)

return (
  <VStack>
    <For each={["horizontal", "vertical"]}>
      {(orientation, key) => (
        <Carousel.Root key={key} orientation={orientation}>
          <Carousel.List>
            {sources.map((src, index) => (
              <Carousel.Item key={index} index={index}>
                <Image
                  src={src}
                  alt="スタジオジブリ作品静止画"
                  boxSize="full"
                  objectFit="cover"
                />
              </Carousel.Item>
            ))}
          </Carousel.List>

          <Carousel.PrevTrigger />
          <Carousel.NextTrigger />

          <Carousel.Indicators />
        </Carousel.Root>
      )}
    </For>
  </VStack>
)

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

デフォルトのスライドを選択する場合は、defaultIndexにindexを設定します。

const sources = useMemo(
  () => [
    "https://www.ghibli.jp/gallery/chihiro015.jpg",
    "https://www.ghibli.jp/gallery/howl049.jpg",
    "https://www.ghibli.jp/gallery/totoro036.jpg",
    "https://www.ghibli.jp/gallery/mononoke033.jpg",
    "https://www.ghibli.jp/gallery/laputa047.jpg",
    "https://www.ghibli.jp/gallery/porco025.jpg",
  ],
  [],
)

return (
  <Carousel.Root defaultIndex={1}>
    <Carousel.List>
      {sources.map((src, index) => (
        <Carousel.Item key={index} index={index}>
          <Image
            src={src}
            alt="スタジオジブリ作品静止画"
            boxSize="full"
            objectFit="cover"
          />
        </Carousel.Item>
      ))}
    </Carousel.List>

    <Carousel.PrevTrigger />
    <Carousel.NextTrigger />

    <Carousel.Indicators />
  </Carousel.Root>
)

スライド間を調整する

スライド間を調整する場合は、gapに文字列または数値を設定します。デフォルトでは、1remが設定されています。

const sources = useMemo(
  () => [
    "https://www.ghibli.jp/gallery/chihiro015.jpg",
    "https://www.ghibli.jp/gallery/howl049.jpg",
    "https://www.ghibli.jp/gallery/totoro036.jpg",
    "https://www.ghibli.jp/gallery/mononoke033.jpg",
    "https://www.ghibli.jp/gallery/laputa047.jpg",
    "https://www.ghibli.jp/gallery/porco025.jpg",
  ],
  [],
)

return (
  <Carousel.Root gap="0">
    <Carousel.List>
      {sources.map((src, index) => (
        <Carousel.Item key={index} index={index}>
          <Image
            src={src}
            alt="スタジオジブリ作品静止画"
            boxSize="full"
            objectFit="cover"
          />
        </Carousel.Item>
      ))}
    </Carousel.List>

    <Carousel.PrevTrigger />
    <Carousel.NextTrigger />

    <Carousel.Indicators />
  </Carousel.Root>
)

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

スライドが切り替わる所要時間を変更する場合は、durationに数値を設定します。デフォルトでは、25が設定されています。

const sources = useMemo(
  () => [
    "https://www.ghibli.jp/gallery/chihiro015.jpg",
    "https://www.ghibli.jp/gallery/howl049.jpg",
    "https://www.ghibli.jp/gallery/totoro036.jpg",
    "https://www.ghibli.jp/gallery/mononoke033.jpg",
    "https://www.ghibli.jp/gallery/laputa047.jpg",
    "https://www.ghibli.jp/gallery/porco025.jpg",
  ],
  [],
)

return (
  <Carousel.Root duration={60}>
    <Carousel.List>
      {sources.map((src, index) => (
        <Carousel.Item key={index} index={index}>
          <Image
            src={src}
            alt="スタジオジブリ作品静止画"
            boxSize="full"
            objectFit="cover"
          />
        </Carousel.Item>
      ))}
    </Carousel.List>

    <Carousel.PrevTrigger />
    <Carousel.NextTrigger />

    <Carousel.Indicators />
  </Carousel.Root>
)

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

スライドのサイズを変更する場合は、slideSizeに文字列または数値を設定します。デフォルトでは、100%が設定されています。

もし、個別のスライドのサイズを変更する場合は、Carousel.ItemのslideSizeに値を設定します。

const sources = useMemo(
  () => [
    "https://www.ghibli.jp/gallery/chihiro015.jpg",
    "https://www.ghibli.jp/gallery/howl049.jpg",
    "https://www.ghibli.jp/gallery/totoro036.jpg",
    "https://www.ghibli.jp/gallery/mononoke033.jpg",
    "https://www.ghibli.jp/gallery/laputa047.jpg",
    "https://www.ghibli.jp/gallery/porco025.jpg",
  ],
  [],
)

return (
  <Carousel.Root slideSize="50%">
    <Carousel.List>
      {sources.map((src, index) => (
        <Carousel.Item
          key={index}
          index={index}
          slideSize={index === 1 ? "100%" : undefined}
        >
          <Image
            src={src}
            alt="スタジオジブリ作品静止画"
            boxSize="full"
            objectFit="cover"
          />
        </Carousel.Item>
      ))}
    </Carousel.List>

    <Carousel.PrevTrigger />
    <Carousel.NextTrigger />

    <Carousel.Indicators />
  </Carousel.Root>
)

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

スライドの位置を変更する場合は、alignに"start", "center", "end"または数値を設定します。デフォルトでは、"center"が設定されています。

const sources = useMemo(
  () => [
    "https://www.ghibli.jp/gallery/chihiro015.jpg",
    "https://www.ghibli.jp/gallery/howl049.jpg",
    "https://www.ghibli.jp/gallery/totoro036.jpg",
    "https://www.ghibli.jp/gallery/mononoke033.jpg",
    "https://www.ghibli.jp/gallery/laputa047.jpg",
    "https://www.ghibli.jp/gallery/porco025.jpg",
  ],
  [],
)

return (
  <VStack>
    <For each={["center", "start", "end"]}>
      {(align, key) => (
        <Carousel.Root key={key} slideSize="50%" align={align}>
          <Carousel.List>
            {sources.map((src, index) => (
              <Carousel.Item key={index} index={index}>
                <Image
                  src={src}
                  alt="スタジオジブリ作品静止画"
                  boxSize="full"
                  objectFit="cover"
                />
              </Carousel.Item>
            ))}
          </Carousel.List>

          <Carousel.PrevTrigger />
          <Carousel.NextTrigger />

          <Carousel.Indicators />
        </Carousel.Root>
      )}
    </For>
  </VStack>
)

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

スライドをスクロールする数を変更する場合は、slidesToScrollに数値を設定します。デフォルトでは、1が設定されています。

const sources = useMemo(
  () => [
    "https://www.ghibli.jp/gallery/chihiro015.jpg",
    "https://www.ghibli.jp/gallery/howl049.jpg",
    "https://www.ghibli.jp/gallery/totoro036.jpg",
    "https://www.ghibli.jp/gallery/mononoke033.jpg",
    "https://www.ghibli.jp/gallery/laputa047.jpg",
    "https://www.ghibli.jp/gallery/porco025.jpg",
  ],
  [],
)

return (
  <Carousel.Root slideSize={`${100 / 3}%`} slidesToScroll={3}>
    <Carousel.List>
      {sources.map((src, index) => (
        <Carousel.Item key={index} index={index}>
          <Image
            src={src}
            alt="スタジオジブリ作品静止画"
            boxSize="full"
            objectFit="cover"
          />
        </Carousel.Item>
      ))}
    </Carousel.List>

    <Carousel.PrevTrigger />
    <Carousel.NextTrigger />

    <Carousel.Indicators />
  </Carousel.Root>
)

自動再生を使う

自動再生を使う場合は、autoplayをtrueに設定します。

const sources = useMemo(
  () => [
    "https://www.ghibli.jp/gallery/chihiro015.jpg",
    "https://www.ghibli.jp/gallery/howl049.jpg",
    "https://www.ghibli.jp/gallery/totoro036.jpg",
    "https://www.ghibli.jp/gallery/mononoke033.jpg",
    "https://www.ghibli.jp/gallery/laputa047.jpg",
    "https://www.ghibli.jp/gallery/porco025.jpg",
  ],
  [],
)

return (
  <Carousel.Root autoplay>
    <Carousel.List>
      {sources.map((src, index) => (
        <Carousel.Item
          key={index}
          index={index}
          slideSize={index === 1 ? "100%" : undefined}
        >
          <Image
            src={src}
            alt="スタジオジブリ作品静止画"
            boxSize="full"
            objectFit="cover"
          />
        </Carousel.Item>
      ))}
    </Carousel.List>

    <Carousel.PrevTrigger />
    <Carousel.NextTrigger />

    <Carousel.Indicators />
  </Carousel.Root>
)

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

自動再生の間隔を変更する場合は、delayに数値(ミリ秒)を設定します。デフォルトでは、4000が設定されています。

const sources = useMemo(
  () => [
    "https://www.ghibli.jp/gallery/chihiro015.jpg",
    "https://www.ghibli.jp/gallery/howl049.jpg",
    "https://www.ghibli.jp/gallery/totoro036.jpg",
    "https://www.ghibli.jp/gallery/mononoke033.jpg",
    "https://www.ghibli.jp/gallery/laputa047.jpg",
    "https://www.ghibli.jp/gallery/porco025.jpg",
  ],
  [],
)

return (
  <Carousel.Root autoplay delay={1000}>
    <Carousel.List>
      {sources.map((src, index) => (
        <Carousel.Item
          key={index}
          index={index}
          slideSize={index === 1 ? "100%" : undefined}
        >
          <Image
            src={src}
            alt="スタジオジブリ作品静止画"
            boxSize="full"
            objectFit="cover"
          />
        </Carousel.Item>
      ))}
    </Carousel.List>

    <Carousel.PrevTrigger />
    <Carousel.NextTrigger />

    <Carousel.Indicators />
  </Carousel.Root>
)

自動再生を停止しない

デフォルトでは、要素上にホバーされたとき自動再生は停止します。停止しない場合は、stopMouseEnterAutoplayをfalseに設定します。

const sources = useMemo(
  () => [
    "https://www.ghibli.jp/gallery/chihiro015.jpg",
    "https://www.ghibli.jp/gallery/howl049.jpg",
    "https://www.ghibli.jp/gallery/totoro036.jpg",
    "https://www.ghibli.jp/gallery/mononoke033.jpg",
    "https://www.ghibli.jp/gallery/laputa047.jpg",
    "https://www.ghibli.jp/gallery/porco025.jpg",
  ],
  [],
)

return (
  <Carousel.Root autoplay stopMouseEnterAutoplay={false}>
    <Carousel.List>
      {sources.map((src, index) => (
        <Carousel.Item
          key={index}
          index={index}
          slideSize={index === 1 ? "100%" : undefined}
        >
          <Image
            src={src}
            alt="スタジオジブリ作品静止画"
            boxSize="full"
            objectFit="cover"
          />
        </Carousel.Item>
      ))}
    </Carousel.List>

    <Carousel.PrevTrigger />
    <Carousel.NextTrigger />

    <Carousel.Indicators />
  </Carousel.Root>
)

ドラッグフリーを使う

ドラッグフリーを使う場合は、dragFreeをtrueに設定します。

const sources = useMemo(
  () => [
    "https://www.ghibli.jp/gallery/chihiro015.jpg",
    "https://www.ghibli.jp/gallery/howl049.jpg",
    "https://www.ghibli.jp/gallery/totoro036.jpg",
    "https://www.ghibli.jp/gallery/mononoke033.jpg",
    "https://www.ghibli.jp/gallery/laputa047.jpg",
    "https://www.ghibli.jp/gallery/porco025.jpg",
  ],
  [],
)

return (
  <Carousel.Root dragFree>
    <Carousel.List>
      {sources.map((src, index) => (
        <Carousel.Item
          key={index}
          index={index}
          slideSize={index === 1 ? "100%" : undefined}
        >
          <Image
            src={src}
            alt="スタジオジブリ作品静止画"
            boxSize="full"
            objectFit="cover"
          />
        </Carousel.Item>
      ))}
    </Carousel.List>

    <Carousel.PrevTrigger />
    <Carousel.NextTrigger />

    <Carousel.Indicators />
  </Carousel.Root>
)

ループを無効にする

ループを無効にする場合は、loopをfalseに設定します。

const sources = useMemo(
  () => [
    "https://www.ghibli.jp/gallery/chihiro015.jpg",
    "https://www.ghibli.jp/gallery/howl049.jpg",
    "https://www.ghibli.jp/gallery/totoro036.jpg",
    "https://www.ghibli.jp/gallery/mononoke033.jpg",
    "https://www.ghibli.jp/gallery/laputa047.jpg",
    "https://www.ghibli.jp/gallery/porco025.jpg",
  ],
  [],
)

return (
  <Carousel.Root loop={false}>
    <Carousel.List>
      {sources.map((src, index) => (
        <Carousel.Item
          key={index}
          index={index}
          slideSize={index === 1 ? "100%" : undefined}
        >
          <Image
            src={src}
            alt="スタジオジブリ作品静止画"
            boxSize="full"
            objectFit="cover"
          />
        </Carousel.Item>
      ))}
    </Carousel.List>

    <Carousel.PrevTrigger />
    <Carousel.NextTrigger />

    <Carousel.Indicators />
  </Carousel.Root>
)

ドラッグを無効にする

ドラッグを無効にする場合は、draggableをfalseに設定します。

const sources = useMemo(
  () => [
    "https://www.ghibli.jp/gallery/chihiro015.jpg",
    "https://www.ghibli.jp/gallery/howl049.jpg",
    "https://www.ghibli.jp/gallery/totoro036.jpg",
    "https://www.ghibli.jp/gallery/mononoke033.jpg",
    "https://www.ghibli.jp/gallery/laputa047.jpg",
    "https://www.ghibli.jp/gallery/porco025.jpg",
  ],
  [],
)

return (
  <Carousel.Root draggable={false}>
    <Carousel.List>
      {sources.map((src, index) => (
        <Carousel.Item
          key={index}
          index={index}
          slideSize={index === 1 ? "100%" : undefined}
        >
          <Image
            src={src}
            alt="スタジオジブリ作品静止画"
            boxSize="full"
            objectFit="cover"
          />
        </Carousel.Item>
      ))}
    </Carousel.List>

    <Carousel.PrevTrigger />
    <Carousel.NextTrigger />

    <Carousel.Indicators />
  </Carousel.Root>
)

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

コントロールボタンをカスタマイズする場合は、Carousel.PrevTriggerやCarousel.NextTriggerにpropsを設定します。

const sources = useMemo(
  () => [
    "https://www.ghibli.jp/gallery/chihiro015.jpg",
    "https://www.ghibli.jp/gallery/howl049.jpg",
    "https://www.ghibli.jp/gallery/totoro036.jpg",
    "https://www.ghibli.jp/gallery/mononoke033.jpg",
    "https://www.ghibli.jp/gallery/laputa047.jpg",
    "https://www.ghibli.jp/gallery/porco025.jpg",
  ],
  [],
)

return (
  <Carousel.Root>
    <Carousel.List>
      {sources.map((src, index) => (
        <Carousel.Item
          key={index}
          index={index}
          slideSize={index === 1 ? "100%" : undefined}
        >
          <Image
            src={src}
            alt="スタジオジブリ作品静止画"
            boxSize="full"
            objectFit="cover"
          />
        </Carousel.Item>
      ))}
    </Carousel.List>

    <Carousel.PrevTrigger
      bottom="4"
      icon={<ArrowLeftIcon />}
      top="unset"
      transform="unset"
    />
    <Carousel.NextTrigger
      bottom="4"
      icon={<ArrowRightIcon />}
      top="unset"
      transform="unset"
    />

    <Carousel.Indicators />
  </Carousel.Root>
)

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

インジケーターをカスタマイズする場合は、Carousel.Indicatorsにpropsを設定します。

const sources = useMemo(
  () => [
    "https://www.ghibli.jp/gallery/chihiro015.jpg",
    "https://www.ghibli.jp/gallery/howl049.jpg",
    "https://www.ghibli.jp/gallery/totoro036.jpg",
    "https://www.ghibli.jp/gallery/mononoke033.jpg",
    "https://www.ghibli.jp/gallery/laputa047.jpg",
    "https://www.ghibli.jp/gallery/porco025.jpg",
  ],
  [],
)

return (
  <Carousel.Root>
    <Carousel.List>
      {sources.map((src, index) => (
        <Carousel.Item
          key={index}
          index={index}
          slideSize={index === 1 ? "100%" : undefined}
        >
          <Image
            src={src}
            alt="スタジオジブリ作品静止画"
            boxSize="full"
            objectFit="cover"
          />
        </Carousel.Item>
      ))}
    </Carousel.List>

    <Carousel.PrevTrigger />
    <Carousel.NextTrigger />

    <Carousel.Indicators
      h="6"
      render={({ selected }) => (
        <Center as="button" cursor="pointer">
          <CircleIcon
            data-selected={dataAttr(selected)}
            color="transparent"
            fill="colorScheme.solid/40"
            fontSize="2xl"
            _selected={{
              fill: "colorScheme.solid",
            }}
            _hover={{
              _notSelected: {
                fill: "colorScheme.solid/70",
              },
            }}
          />
        </Center>
      )}
    />
  </Carousel.Root>
)

イベントをハンドルする

ユーザーのドラッグなどのイベントをハンドルする場合は、watchDragを使用します。

const sources = useMemo(
  () => [
    "https://www.ghibli.jp/gallery/chihiro015.jpg",
    "https://www.ghibli.jp/gallery/howl049.jpg",
    "https://www.ghibli.jp/gallery/totoro036.jpg",
    "https://www.ghibli.jp/gallery/mononoke033.jpg",
    "https://www.ghibli.jp/gallery/laputa047.jpg",
    "https://www.ghibli.jp/gallery/porco025.jpg",
  ],
  [],
)

return (
  <Carousel.Root
    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
    }}
  >
    <Carousel.List>
      {sources.map((src, index) => (
        <Carousel.Item key={index} index={index}>
          <Image
            src={src}
            alt="スタジオジブリ作品静止画"
            boxSize="full"
            objectFit="cover"
          />
        </Carousel.Item>
      ))}
    </Carousel.List>

    <Carousel.PrevTrigger />
    <Carousel.NextTrigger />

    <Carousel.Indicators />
  </Carousel.Root>
)

制御する

State

Ref

const controlRef = useRef<Carousel.Control>(null)
const [index, setIndex] = useState(0)
const [sources, setSources] = useState([
  "https://www.ghibli.jp/gallery/baron001.jpg",
  "https://www.ghibli.jp/gallery/baron002.jpg",
  "https://www.ghibli.jp/gallery/baron003.jpg",
  "https://www.ghibli.jp/gallery/baron004.jpg",
  "https://www.ghibli.jp/gallery/baron005.jpg",
])

return (
  <VStack>
    <Carousel.Root controlRef={controlRef} index={index} onChange={setIndex}>
      <Carousel.List>
        {sources.map((src, index) => (
          <Carousel.Item key={index} index={index}>
            <Image
              src={src}
              alt="スタジオジブリ作品静止画"
              boxSize="full"
              objectFit="cover"
            />
          </Carousel.Item>
        ))}
      </Carousel.List>

      <Carousel.PrevTrigger />
      <Carousel.NextTrigger />

      <Carousel.Indicators />
    </Carousel.Root>

    <ButtonGroup.Root>
      <ButtonGroup.Item
        disabled={sources.length === 50}
        onClick={() => {
          const num = (sources.length + 1).toString().padStart(2, "0")
          const nextSources = [
            ...sources,
            `https://www.ghibli.jp/gallery/baron0${num}.jpg`,
          ]
          setSources(nextSources)
          setIndex(nextSources.length - 1)
        }}
      >
        Add
      </ButtonGroup.Item>
      <ButtonGroup.Item
        disabled={sources.length === 1}
        onClick={() => {
          if (index === sources.length - 1) setIndex((prev) => prev - 1)
          setSources(sources.slice(0, -1))
        }}
      >
        Remove
      </ButtonGroup.Item>
    </ButtonGroup.Root>

    <VStack gap="sm">
      <Text>State</Text>
      <ButtonGroup.Root>
        <ButtonGroup.Item onClick={() => setIndex(0)}>Home</ButtonGroup.Item>
        <ButtonGroup.Item
          onClick={() =>
            setIndex((prev) => (prev === 0 ? sources.length - 1 : prev - 1))
          }
        >
          Prev
        </ButtonGroup.Item>
        <ButtonGroup.Item
          onClick={() =>
            setIndex((prev) => (prev === sources.length - 1 ? 0 : prev + 1))
          }
        >
          Next
        </ButtonGroup.Item>
        <ButtonGroup.Item onClick={() => setIndex(sources.length - 1)}>
          End
        </ButtonGroup.Item>
      </ButtonGroup.Root>
    </VStack>

    <VStack gap="sm">
      <Text>Ref</Text>
      <ButtonGroup.Root>
        <ButtonGroup.Item onClick={() => controlRef.current?.scrollTo(0)}>
          Home
        </ButtonGroup.Item>
        <ButtonGroup.Item onClick={() => controlRef.current?.scrollPrev()}>
          Prev
        </ButtonGroup.Item>
        <ButtonGroup.Item onClick={() => controlRef.current?.scrollNext()}>
          Next
        </ButtonGroup.Item>
        <ButtonGroup.Item
          onClick={() => controlRef.current?.scrollTo(sources.length - 1)}
        >
          End
        </ButtonGroup.Item>
      </ButtonGroup.Root>
    </VStack>
  </VStack>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

const [index, setIndex] = useState(0)
const sources = useMemo(
  () =>
    Array.from(
      {
        length: 50,
      },
      (_, index) => {
        const num = (index + 1).toString().padStart(2, "0")
        return `https://www.ghibli.jp/gallery/baron0${num}.jpg`
      },
    ),
  [],
)

return (
  <VStack>
    <Carousel.Root index={index} onChange={setIndex}>
      <Carousel.List>
        {sources.map((src, index) => (
          <Carousel.Item key={index} index={index}>
            <Image
              src={src}
              alt="スタジオジブリ作品静止画"
              boxSize="full"
              objectFit="cover"
            />
          </Carousel.Item>
        ))}
      </Carousel.List>
    </Carousel.Root>

    <Carousel.Root
      containScroll="keepSnaps"
      dragFree
      h="5xs"
      index={index}
      slideSize="20%"
    >
      <Carousel.List>
        {sources.map((src, index) => (
          <Carousel.Item
            key={index}
            cursor="pointer"
            index={index}
            opacity="0.4"
            _selected={{
              opacity: 1,
            }}
            onClick={() => setIndex(index)}
          >
            <Image
              src={src}
              alt="スタジオジブリ作品静止画"
              boxSize="full"
              objectFit="cover"
            />
          </Carousel.Item>
        ))}
      </Carousel.List>
    </Carousel.Root>
  </VStack>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

onScrollProgressを使用して、現在のスクロール量にアクセスできます。

const [progress, setProgress] = useState(0)
const sources = useMemo(
  () => [
    "https://www.ghibli.jp/gallery/chihiro015.jpg",
    "https://www.ghibli.jp/gallery/howl049.jpg",
    "https://www.ghibli.jp/gallery/totoro036.jpg",
    "https://www.ghibli.jp/gallery/mononoke033.jpg",
    "https://www.ghibli.jp/gallery/laputa047.jpg",
    "https://www.ghibli.jp/gallery/porco025.jpg",
  ],
  [],
)

return (
  <VStack>
    <Carousel.Root dragFree loop={false} onScrollProgress={setProgress}>
      <Carousel.List>
        {sources.map((src, index) => (
          <Carousel.Item key={index} index={index}>
            <Image
              src={src}
              alt="スタジオジブリ作品静止画"
              boxSize="full"
              objectFit="cover"
            />
          </Carousel.Item>
        ))}
      </Carousel.List>

      <Carousel.PrevTrigger />
      <Carousel.NextTrigger />

      <Carousel.Indicators />
    </Carousel.Root>

    <Progress value={progress} />
  </VStack>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

Props

Carousel.Root

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	`"md"`	`"lg" \| "md" \| "sm"` The size of the component.
`align`	`"center"`	`CarouselAlign` The alignment of the carousel.
`autoplay`	`false`	`boolean` If `true`, the carousel will be autoplay.
`containScroll`	`false`	`CarouselContainScroll` Clear leading and trailing empty space that causes excessive scrolling. Use trimSnaps to only use snap points that trigger scrolling or keepSnaps to keep them.
`controlRef`	-	`RefObject<EmblaCarouselType \| null>` Ref of the resizable item callback.
`defaultIndex`	`0`	`number` The initial index of the carousel slide.
`delay`	`4000`	`number` The number for the autoplay interval of the carousel.
`dragFree`	`false`	`boolean` If `true`, momentum scrolling will be enabled.
`draggable`	`true`	`boolean` If `true`, carousel can be scrolled with mouse and touch interactions.
`duration`	`25`	`number` Set scroll duration when triggered by any of the API methods. Higher numbers enables slower scrolling. Drag interactions are not affected because duration is then determined by the drag force.
`includeGapInSize`	`true`	`boolean` If `true`, gap will be treated as part of the carousel slide size.
`index`	-	`number` The index of the carousel slide.
`inViewThreshold`	`0`	`CarouselInViewThreshold` Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view.
`loop`	`true`	`boolean` If `true`, infinite looping. Automatically falls back to false if slide content isn't enough to loop.
`onChange`	-	`(index: number) => void` The callback invoked when carousel slide selected.
`onScrollProgress`	-	`(progress: number) => void` A callback that return the current scroll amount when the carousel is scrolled.
`orientation`	`"horizontal"`	`Orientation` The orientation of the carousel.
`plugins`	-	`CreatePluginType<LoosePluginType, {}>[]` Embla plugins to use.
`skipSnaps`	`false`	`boolean` If `true`, allow the carousel to skip scroll snaps if it's dragged vigorously. Note that this option will be ignored if the dragFree option is set to true.
`slideSize`	-	`"-moz-fit-content" \| "-moz-initial" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-fit-content" \| "-webkit-max-content" \| "0.5" \| "1.5" \| "1" \| "1/12" ...` The size of the carousel item.
`slidesToScroll`	`1`	`number` The number of slides that should be scrolled with next or previous buttons.
`stopMouseEnterAutoplay`	`true`	`boolean` If `true`, autoplay will pause when the mouse entries over.
`watchDrag`	`true`	`DragHandlerOptionType` Enables for scrolling the carousel with mouse and touch interactions. Set this to `false` to disable drag events or pass a custom callback to add your own drag logic.
`watchResize`	`true`	`ResizeHandlerOptionType` Embla automatically watches the container and slides for size changes and runs `reInit` when any size has changed. Set this to `false` to disable this behaviour or pass a custom callback to add your own resize logic.
`watchSlides`	`true`	`SlidesHandlerOptionType` Embla automatically watches the container for added and/or removed slides and runs `reInit` if needed. Set this to `false` to disable this behaviour or pass a custom callback to add your own slides changed logic.

Carousel.Indicator

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`index`	-	`number` The index of the carousel indicator.

Carousel.Indicators

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`render`	-	`(props: { index: number; selected: boolean }) => ReactNode` The function used to generate children. it will be called with `{ index: number; selected: boolean }`.

Carousel.Item

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`index`	-	`number` The index of the carousel item.
`slideSize`	-	`"-moz-fit-content" \| "-moz-initial" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-fit-content" \| "-webkit-max-content" \| "0.5" \| "1.5" \| "1" \| "1/12" ...` The size of the carousel item.

Carousel.List

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Carousel.NextTrigger

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	-	`"2xl" \| "2xs" \| "lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`variant`	-	`"ghost" \| "outline" \| "solid" \| "subtle" \| "surface" ...` The variant of the component.
`active`	`false`	`boolean` If `true`, the button is represented as active.
`disabled`	`false`	`boolean` If `true`, the button is disabled.
`disableRipple`	`false`	`boolean` If `true`, disable ripple effects when pressing a element.
`icon`	-	`ReactNode` The icon to be used in the button.
`loading`	`false`	`boolean` If `true`, the loading state of the button is represented.
`type`	`"button"`	`"button" \| "reset" \| "submit"` The type of button. Accepts `button`, `reset`, or `submit`.

Carousel.PrevTrigger

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	-	`"2xl" \| "2xs" \| "lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`variant`	-	`"ghost" \| "outline" \| "solid" \| "subtle" \| "surface" ...` The variant of the component.
`active`	`false`	`boolean` If `true`, the button is represented as active.
`disabled`	`false`	`boolean` If `true`, the button is disabled.
`disableRipple`	`false`	`boolean` If `true`, disable ripple effects when pressing a element.
`icon`	-	`ReactNode` The icon to be used in the button.
`loading`	`false`	`boolean` If `true`, the loading state of the button is represented.
`type`	`"button"`	`"button" \| "reset" \| "submit"` The type of button. Accepts `button`, `reset`, or `submit`.

アクセシビリティ

Carouselは、アクセシビリティに関してWAI-ARIA - Carousel (Slide Show or Image Rotator) Patternに従います。

キー	説明	状態
`Tab`	フォーカスがカルーセルに移動すると、アクティブな項目をフォーカスします。	-
`ArrowLeft`	前の項目をフォーカスしてアクティブにします。最初の項目の場合は最後の項目をフォーカスします。	`orientation="horizontal"`
`ArrowRight`	次の項目をフォーカスしてアクティブにします。最後の項目の場合は最初の項目をフォーカスします。	`orientation="horizontal"`
`ArrowUp`	前の項目をフォーカスしてアクティブにします。最初の項目の場合は最後の項目をフォーカスします。	`orientation="vertical"`
`ArrowDown`	次の項目をフォーカスしてアクティブにします。最後の項目の場合は最初の項目をフォーカスします。	`orientation="vertical"`
`Home`	最初の項目をフォーカスしてアクティブにします。	-
`End`	最後の項目をフォーカスしてアクティブにします。	-

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`Carousel.Root`	`aria-roledescription="carousel"`	カルーセルであることを示します。
`Carousel.List`	`aria-live`	`autoplay`が`"true"`の場合は`"off"`を設定し、`"false"`の場合は`"polite"`を設定します。
`Carousel.Item`	`role="tabpanel"`	タブパネルであることを示します。
	`aria-label`	`"1 / 4"`のように、現在のスライドの番号を設定します。
	`aria-roledescription="slide"`	スライドであることを示します。
`Carousel.PrevTrigger`	`aria-controls`	関連した`Carousel.List`の`id`を設定します。
	`aria-label`	`"前のスライドに移動する"`を設定します。
`Carousel.NextTrigger`	`aria-controls`	関連した`Carousel.List`の`id`を設定します。
	`aria-label`	`"次のスライドに移動する"`を設定します。
`Carousel.Indicators`	`role="tablist"`	タブリストであることを示します。
	`aria-label`	`"スライド"`を設定します。
	`aria-orientation`	`orientation`の値に基づいて`"horizontal"`または`"vertical"`を設定します。デフォルトは`"horizontal"`です。
`Carousel.Indicator`	`role="tab"`	タブであることを示します。
	`aria-controls`	関連した`Carousel.Item`の`id`を設定します。
	`aria-label`	`"1スライドに移動する"`のように、移動先のスライドの番号を設定します。
	`aria-selected`	関連したスライドが選択されている場合は`"true"`を設定し、選択されていない場合は`"false"`を設定します。

類似のコンポーネント

InfiniteScrollAreaは、無限スクロール機能を提供するコンポーネントです。このコンポーネントは、コンポーネントの終わりに達したときに次のデータセットを自動的に読み込み、表示することで、スムーズなスクロール体験を提供します。

Accordionは、情報を展開または折りたたんで表示するリストのコンポーネントです。

Rotateは、２つの要素を回転させながら切り替えるアニメーションを提供するコンポーネントです。

Rippleは、要素に波及効果を付与し、ユーザーがクリックしたかどうかを認識させるコンポーネントです。

Flipは、２つの要素をフリップさせながら切り替えるアニメーションを提供するコンポーネントです。

Motionは、MotionにYamada UIのStyle Propsを拡張した便利なコンポーネントです。

Airyは、２つの要素をふわっと切り替えるアニメーションを提供するコンポーネントです。

ScrollAreaは、カスタムされたスクロールバーが表示されるコンポーネントです。

使用しているコンポーネント・フック

Buttonは、フォームの送信、モーダルの開閉など、ユーザーが操作できるインタラクティブなコンポーネントです。

Iconは、プロジェクトに使用できる一般的なアイコンコンポーネントです。

useBooleanは、on・off・toggle関数を使用して真偽値を管理するために使用されるカスタムフックです。