---
title: Carousel
description: "`Carousel`は、複数の要素をスライドショーのように表示するコンポーネントです。"
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/carousel/carousel.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/carousel
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-carousel--basic
---

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

## 使い方

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

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

```tsx
import { Carousel } from "@workspaces/ui"
```

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

:::note
`Carousel`は、内部で[embla-carousel-react](https://www.embla-carousel.com/)を使用しています。
:::

### サイズを変更する

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

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

```tsx
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"`が設定されています。

```tsx
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`を設定します。

```tsx
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`が設定されています。

```tsx
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`が設定されています。

```tsx
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`に値を設定します。

```tsx
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"`が設定されています。

```tsx
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`が設定されています。

```tsx preview functional
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`に設定します。

```tsx
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`が設定されています。

```tsx
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`に設定します。

```tsx
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`に設定します。

```tsx
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`に設定します。

```tsx
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`に設定します。

```tsx
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を設定します。

```tsx
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を設定します。

```tsx
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`を使用します。

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

### 制御する

```tsx preview functional client
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>
)
```

```tsx preview functional 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>
)
```

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

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

## 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`.           |

## アクセシビリティ

現在、v2の移行に伴い、このセクションは更新中です。