Carousel

Carousel is a component that displays multiple elements like a slideshow.

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

Usage

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 internally uses embla-carousel-react.

Change Size

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

Change Color Scheme

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

Change Direction

To change the direction, set orientation to "horizontal" or "vertical". By default, "horizontal" is set.

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

Select the default slide

To select the default slide, set defaultIndex to the 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>
)

Adjust the space between slides

To adjust the space between slides, set gap to a string or a number. By default, 1rem is set.

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

Change the duration of slide transition

To change the duration of slide transition, set duration to a number. By default, 25 is set.

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

Change the size of the slides

To change the size of the slides, set slideSize to a string or a number. By default, 100% is set.

If you want to change the size of individual slides, set the value to slideSize of Carousel.Item.

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

Change the alignment of the slides

To change the alignment of the slides, set align to "start", "center", "end", or a number. By default, "center" is set.

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

Change the number of slides to scroll

To change the number of slides to scroll, set slidesToScroll to a number. By default, 1 is set.

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

Use autoplay

To use autoplay, set autoplay to 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>
)

Change the autoplay interval

To change the autoplay interval, set delay to a number (milliseconds). By default, 4000 is set.

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

Do not stop autoplay on mouse enter

By default, autoplay stops when the element is hovered over. To prevent this, set stopMouseEnterAutoplay to 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>
)

Use Drag-Free

To use drag-free, set dragFree to 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>
)

Disable looping

To disable looping, set loop to 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>
)

Disable dragging

To disable dragging, set draggable to 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>
)

Customize control buttons

To customize control buttons, set props to Carousel.PrevTrigger or Carousel.NextTrigger.

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

Customize indicators

To customize indicators, set props to Carousel.Indicators.

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

Handle Events

If you want to handle events such as user drag, use 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>
)

Control

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

If you use this code, you need to add "use client" to the top of the file.

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

If you use this code, you need to add "use client" to the top of the file.

You can access the current scroll amount using 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>
)

If you use this code, you need to add "use client" to the top of the file.

Props

Carousel.Root

Prop	Default	Type / Description
`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	Default	Type / Description
`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	Default	Type / Description
`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	Default	Type / Description
`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	Default	Type / Description
`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	Default	Type / Description
`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.
`fullRounded`	`false`	`boolean` If `true`, the button is full rounded. Else, it'll be slightly round.
`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	Default	Type / Description
`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.
`fullRounded`	`false`	`boolean` If `true`, the button is full rounded. Else, it'll be slightly round.
`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`.

Accessibility

Currently, this section is being updated due to the migration of v2.