# Carousel

URL: https://ark-ui.com/docs/components/carousel
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/carousel.mdx

An interactive slideshow component for cycling through elements.

---

<ComponentPreview id="Carousel" />

## Anatomy

<Anatomy id="carousel" />

```tsx
<Carousel.Root>
  <Carousel.Control>
    <Carousel.PrevTrigger />
    <Carousel.NextTrigger />
  </Carousel.Control>
  <Carousel.ItemGroup>
    <Carousel.Item />
  </Carousel.ItemGroup>
  <Carousel.IndicatorGroup>
    <Carousel.Indicator />
  </Carousel.IndicatorGroup>
</Carousel.Root>
```

## Examples

**Example: basic**

#### React

```tsx
import { Carousel } from '@ark-ui/react/carousel'
import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react'
import styles from 'styles/carousel.module.css'

const images = [
  { src: 'https://picsum.photos/seed/1/500/300', alt: 'Nature landscape' },
  { src: 'https://picsum.photos/seed/2/500/300', alt: 'City skyline' },
  { src: 'https://picsum.photos/seed/3/500/300', alt: 'Mountain view' },
  { src: 'https://picsum.photos/seed/4/500/300', alt: 'Ocean sunset' },
  { src: 'https://picsum.photos/seed/5/500/300', alt: 'Forest path' },
]

export const Basic = () => {
  return (
    <Carousel.Root className={styles.Root} slideCount={images.length}>
      <Carousel.Control className={styles.Control}>
        <Carousel.PrevTrigger className={styles.Trigger}>
          <ArrowLeftIcon />
        </Carousel.PrevTrigger>
        <Carousel.ItemGroup className={styles.ItemGroup}>
          {images.map((image, index) => (
            <Carousel.Item className={styles.Item} key={index} index={index}>
              <img src={image.src} alt={image.alt} width="500" height="300" />
            </Carousel.Item>
          ))}
        </Carousel.ItemGroup>
        <Carousel.NextTrigger className={styles.Trigger}>
          <ArrowRightIcon />
        </Carousel.NextTrigger>
      </Carousel.Control>
      <Carousel.IndicatorGroup className={styles.IndicatorGroup}>
        {images.map((_, index) => (
          <Carousel.Indicator className={styles.Indicator} key={index} index={index} />
        ))}
      </Carousel.IndicatorGroup>
    </Carousel.Root>
  )
}

```

#### Solid

```tsx
import { Carousel } from '@ark-ui/solid/carousel'
import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-solid'
import { Index } from 'solid-js'
import styles from 'styles/carousel.module.css'

const images = [
  { src: 'https://picsum.photos/seed/1/500/300', alt: 'Nature landscape' },
  { src: 'https://picsum.photos/seed/2/500/300', alt: 'City skyline' },
  { src: 'https://picsum.photos/seed/3/500/300', alt: 'Mountain view' },
  { src: 'https://picsum.photos/seed/4/500/300', alt: 'Ocean sunset' },
  { src: 'https://picsum.photos/seed/5/500/300', alt: 'Forest path' },
]

export const Basic = () => {
  return (
    <Carousel.Root class={styles.Root} slideCount={images.length}>
      <Carousel.Control class={styles.Control}>
        <Carousel.PrevTrigger class={styles.Trigger}>
          <ArrowLeftIcon />
        </Carousel.PrevTrigger>
        <Carousel.ItemGroup class={styles.ItemGroup}>
          <Index each={images}>
            {(image, index) => (
              <Carousel.Item class={styles.Item} index={index}>
                <img src={image().src} alt={image().alt} width="500" height="300" />
              </Carousel.Item>
            )}
          </Index>
        </Carousel.ItemGroup>
        <Carousel.NextTrigger class={styles.Trigger}>
          <ArrowRightIcon />
        </Carousel.NextTrigger>
      </Carousel.Control>
      <Carousel.IndicatorGroup class={styles.IndicatorGroup}>
        <Index each={images}>{(_, index) => <Carousel.Indicator class={styles.Indicator} index={index} />}</Index>
      </Carousel.IndicatorGroup>
    </Carousel.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Carousel } from '@ark-ui/vue/carousel'
import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-vue-next'
import styles from 'styles/carousel.module.css'

const images = [
  { src: 'https://picsum.photos/seed/1/500/300', alt: 'Nature landscape' },
  { src: 'https://picsum.photos/seed/2/500/300', alt: 'City skyline' },
  { src: 'https://picsum.photos/seed/3/500/300', alt: 'Mountain view' },
  { src: 'https://picsum.photos/seed/4/500/300', alt: 'Ocean sunset' },
  { src: 'https://picsum.photos/seed/5/500/300', alt: 'Forest path' },
]
</script>

<template>
  <Carousel.Root :class="styles.Root" :slide-count="images.length">
    <Carousel.Control :class="styles.Control">
      <Carousel.PrevTrigger :class="styles.Trigger">
        <ArrowLeftIcon />
      </Carousel.PrevTrigger>
      <Carousel.ItemGroup :class="styles.ItemGroup">
        <Carousel.Item v-for="(image, index) in images" :key="index" :class="styles.Item" :index="index">
          <img :src="image.src" :alt="image.alt" width="500" height="300" />
        </Carousel.Item>
      </Carousel.ItemGroup>
      <Carousel.NextTrigger :class="styles.Trigger">
        <ArrowRightIcon />
      </Carousel.NextTrigger>
    </Carousel.Control>
    <Carousel.IndicatorGroup :class="styles.IndicatorGroup">
      <Carousel.Indicator v-for="(_, index) in images" :key="index" :class="styles.Indicator" :index="index" />
    </Carousel.IndicatorGroup>
  </Carousel.Root>
</template>

```

#### Svelte

```svelte
<script>
  import { Carousel } from '@ark-ui/svelte/carousel'
  import ArrowLeftIcon from 'lucide-svelte/icons/arrow-left'
  import ArrowRightIcon from 'lucide-svelte/icons/arrow-right'
  import styles from 'styles/carousel.module.css'

  const images = [
    { src: 'https://picsum.photos/seed/1/500/300', alt: 'Nature landscape' },
    { src: 'https://picsum.photos/seed/2/500/300', alt: 'City skyline' },
    { src: 'https://picsum.photos/seed/3/500/300', alt: 'Mountain view' },
    { src: 'https://picsum.photos/seed/4/500/300', alt: 'Ocean sunset' },
    { src: 'https://picsum.photos/seed/5/500/300', alt: 'Forest path' },
  ]
</script>

<Carousel.Root class={styles.Root} slideCount={images.length}>
  <Carousel.Control class={styles.Control}>
    <Carousel.PrevTrigger class={styles.Trigger}>
      <ArrowLeftIcon />
    </Carousel.PrevTrigger>
    <Carousel.ItemGroup class={styles.ItemGroup}>
      {#each images as image, index}
        <Carousel.Item class={styles.Item} {index}>
          <img src={image.src} alt={image.alt} width="500" height="300" />
        </Carousel.Item>
      {/each}
    </Carousel.ItemGroup>
    <Carousel.NextTrigger class={styles.Trigger}>
      <ArrowRightIcon />
    </Carousel.NextTrigger>
  </Carousel.Control>
  <Carousel.IndicatorGroup class={styles.IndicatorGroup}>
    {#each images as _, index}
      <Carousel.Indicator class={styles.Indicator} {index} />
    {/each}
  </Carousel.IndicatorGroup>
</Carousel.Root>

```

### Controlled

To create a controlled Carousel component, you can manage the state of the carousel using the `page` prop and update it
when the `onPageChange` event handler is called:

**Example: controlled**

#### React

```tsx
import { Carousel } from '@ark-ui/react/carousel'
import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react'
import { useState } from 'react'
import styles from 'styles/carousel.module.css'

const images = [
  { src: 'https://picsum.photos/seed/1/500/300', alt: 'Nature landscape' },
  { src: 'https://picsum.photos/seed/2/500/300', alt: 'City skyline' },
  { src: 'https://picsum.photos/seed/3/500/300', alt: 'Mountain view' },
  { src: 'https://picsum.photos/seed/4/500/300', alt: 'Ocean sunset' },
  { src: 'https://picsum.photos/seed/5/500/300', alt: 'Forest path' },
]

export const Controlled = () => {
  const [page, setPage] = useState(0)

  return (
    <Carousel.Root className={styles.Root} slideCount={images.length} page={page} onPageChange={(e) => setPage(e.page)}>
      <Carousel.Control className={styles.Control}>
        <Carousel.PrevTrigger className={styles.Trigger}>
          <ArrowLeftIcon />
        </Carousel.PrevTrigger>
        <Carousel.ItemGroup className={styles.ItemGroup}>
          {images.map((image, index) => (
            <Carousel.Item className={styles.Item} key={index} index={index}>
              <img src={image.src} alt={image.alt} width="500" height="300" />
            </Carousel.Item>
          ))}
        </Carousel.ItemGroup>
        <Carousel.NextTrigger className={styles.Trigger}>
          <ArrowRightIcon />
        </Carousel.NextTrigger>
      </Carousel.Control>
      <Carousel.IndicatorGroup className={styles.IndicatorGroup}>
        {images.map((_, index) => (
          <Carousel.Indicator className={styles.Indicator} key={index} index={index} />
        ))}
      </Carousel.IndicatorGroup>
    </Carousel.Root>
  )
}

```

#### Solid

```tsx
import { Carousel } from '@ark-ui/solid/carousel'
import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-solid'
import { Index, createSignal } from 'solid-js'
import styles from 'styles/carousel.module.css'

const images = [
  { src: 'https://picsum.photos/seed/1/500/300', alt: 'Nature landscape' },
  { src: 'https://picsum.photos/seed/2/500/300', alt: 'City skyline' },
  { src: 'https://picsum.photos/seed/3/500/300', alt: 'Mountain view' },
  { src: 'https://picsum.photos/seed/4/500/300', alt: 'Ocean sunset' },
  { src: 'https://picsum.photos/seed/5/500/300', alt: 'Forest path' },
]

export const Controlled = () => {
  const [page, setPage] = createSignal(0)

  return (
    <Carousel.Root
      class={styles.Root}
      slideCount={images.length}
      page={page()}
      onPageChange={(details) => setPage(details.page)}
    >
      <Carousel.Control class={styles.Control}>
        <Carousel.PrevTrigger class={styles.Trigger}>
          <ArrowLeftIcon />
        </Carousel.PrevTrigger>
        <Carousel.ItemGroup class={styles.ItemGroup}>
          <Index each={images}>
            {(image, index) => (
              <Carousel.Item class={styles.Item} index={index}>
                <img src={image().src} alt={image().alt} width="500" height="300" />
              </Carousel.Item>
            )}
          </Index>
        </Carousel.ItemGroup>
        <Carousel.NextTrigger class={styles.Trigger}>
          <ArrowRightIcon />
        </Carousel.NextTrigger>
      </Carousel.Control>
      <Carousel.IndicatorGroup class={styles.IndicatorGroup}>
        <Index each={images}>{(_, index) => <Carousel.Indicator class={styles.Indicator} index={index} />}</Index>
      </Carousel.IndicatorGroup>
    </Carousel.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Carousel } from '@ark-ui/vue/carousel'
import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-vue-next'
import { ref } from 'vue'
import styles from 'styles/carousel.module.css'

const images = [
  { src: 'https://picsum.photos/seed/1/500/300', alt: 'Nature landscape' },
  { src: 'https://picsum.photos/seed/2/500/300', alt: 'City skyline' },
  { src: 'https://picsum.photos/seed/3/500/300', alt: 'Mountain view' },
  { src: 'https://picsum.photos/seed/4/500/300', alt: 'Ocean sunset' },
  { src: 'https://picsum.photos/seed/5/500/300', alt: 'Forest path' },
]
const page = ref(0)
</script>

<template>
  <div>
    <div>Current page: {{ page }}</div>
    <Carousel.Root :class="styles.Root" v-model:page="page" :slide-count="images.length">
      <Carousel.Control :class="styles.Control">
        <Carousel.PrevTrigger :class="styles.Trigger">
          <ArrowLeftIcon />
        </Carousel.PrevTrigger>
        <Carousel.ItemGroup :class="styles.ItemGroup">
          <Carousel.Item v-for="(image, index) in images" :key="index" :class="styles.Item" :index="index">
            <img :src="image.src" :alt="image.alt" width="500" height="300" />
          </Carousel.Item>
        </Carousel.ItemGroup>
        <Carousel.NextTrigger :class="styles.Trigger">
          <ArrowRightIcon />
        </Carousel.NextTrigger>
      </Carousel.Control>
      <Carousel.IndicatorGroup :class="styles.IndicatorGroup">
        <Carousel.Indicator v-for="(_, index) in images" :key="index" :class="styles.Indicator" :index="index" />
      </Carousel.IndicatorGroup>
    </Carousel.Root>
  </div>
</template>

```

#### Svelte

```svelte
<script>
  import { Carousel } from '@ark-ui/svelte/carousel'
  import ArrowLeftIcon from 'lucide-svelte/icons/arrow-left'
  import ArrowRightIcon from 'lucide-svelte/icons/arrow-right'
  import styles from 'styles/carousel.module.css'

  const images = [
    { src: 'https://picsum.photos/seed/1/500/300', alt: 'Nature landscape' },
    { src: 'https://picsum.photos/seed/2/500/300', alt: 'City skyline' },
    { src: 'https://picsum.photos/seed/3/500/300', alt: 'Mountain view' },
    { src: 'https://picsum.photos/seed/4/500/300', alt: 'Ocean sunset' },
    { src: 'https://picsum.photos/seed/5/500/300', alt: 'Forest path' },
  ]
  let page = $state(0)
</script>

<div>
  <div>Current page: {page}</div>
  <Carousel.Root class={styles.Root} bind:page slideCount={images.length}>
    <Carousel.Control class={styles.Control}>
      <Carousel.PrevTrigger class={styles.Trigger}>
        <ArrowLeftIcon />
      </Carousel.PrevTrigger>
      <Carousel.ItemGroup class={styles.ItemGroup}>
        {#each images as image, index}
          <Carousel.Item class={styles.Item} {index}>
            <img src={image.src} alt={image.alt} width="500" height="300" />
          </Carousel.Item>
        {/each}
      </Carousel.ItemGroup>
      <Carousel.NextTrigger class={styles.Trigger}>
        <ArrowRightIcon />
      </Carousel.NextTrigger>
    </Carousel.Control>
    <Carousel.IndicatorGroup class={styles.IndicatorGroup}>
      {#each images as _, index}
        <Carousel.Indicator class={styles.Indicator} {index} />
      {/each}
    </Carousel.IndicatorGroup>
  </Carousel.Root>
</div>

```

### Root Provider

An alternative way to control the carousel is to use the `RootProvider` component and the `useCarousel` hook. This way
you can access the state and methods from outside the component.

**Example: root-provider**

#### React

```tsx
import { Carousel, useCarousel } from '@ark-ui/react/carousel'
import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react'
import styles from 'styles/carousel.module.css'

const images = [
  { src: 'https://picsum.photos/seed/1/500/300', alt: 'Nature landscape' },
  { src: 'https://picsum.photos/seed/2/500/300', alt: 'City skyline' },
  { src: 'https://picsum.photos/seed/3/500/300', alt: 'Mountain view' },
  { src: 'https://picsum.photos/seed/4/500/300', alt: 'Ocean sunset' },
  { src: 'https://picsum.photos/seed/5/500/300', alt: 'Forest path' },
]

export const RootProvider = () => {
  const carousel = useCarousel({ slideCount: images.length })

  return (
    <div className="vstack">
      <output>Page: {carousel.page}</output>
      <Carousel.RootProvider className={styles.Root} value={carousel}>
        <Carousel.Control className={styles.Control}>
          <Carousel.PrevTrigger className={styles.Trigger}>
            <ArrowLeftIcon />
          </Carousel.PrevTrigger>
          <Carousel.ItemGroup className={styles.ItemGroup}>
            {images.map((image, index) => (
              <Carousel.Item className={styles.Item} key={index} index={index}>
                <img src={image.src} alt={image.alt} width="500" height="300" />
              </Carousel.Item>
            ))}
          </Carousel.ItemGroup>
          <Carousel.NextTrigger className={styles.Trigger}>
            <ArrowRightIcon />
          </Carousel.NextTrigger>
        </Carousel.Control>
        <Carousel.IndicatorGroup className={styles.IndicatorGroup}>
          {images.map((_, index) => (
            <Carousel.Indicator className={styles.Indicator} key={index} index={index} />
          ))}
        </Carousel.IndicatorGroup>
      </Carousel.RootProvider>
    </div>
  )
}

```

#### Solid

```tsx
import { Carousel, useCarousel } from '@ark-ui/solid/carousel'
import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-solid'
import { Index } from 'solid-js'
import styles from 'styles/carousel.module.css'

const images = [
  { src: 'https://picsum.photos/seed/1/500/300', alt: 'Nature landscape' },
  { src: 'https://picsum.photos/seed/2/500/300', alt: 'City skyline' },
  { src: 'https://picsum.photos/seed/3/500/300', alt: 'Mountain view' },
  { src: 'https://picsum.photos/seed/4/500/300', alt: 'Ocean sunset' },
  { src: 'https://picsum.photos/seed/5/500/300', alt: 'Forest path' },
]

export const RootProvider = () => {
  const carousel = useCarousel({ slideCount: images.length })

  return (
    <div class="vstack">
      <output>Page: {carousel().page}</output>
      <Carousel.RootProvider class={styles.Root} value={carousel}>
        <Carousel.Control class={styles.Control}>
          <Carousel.PrevTrigger class={styles.Trigger}>
            <ArrowLeftIcon />
          </Carousel.PrevTrigger>
          <Carousel.ItemGroup class={styles.ItemGroup}>
            <Index each={images}>
              {(image, index) => (
                <Carousel.Item class={styles.Item} index={index}>
                  <img src={image().src} alt={image().alt} width="500" height="300" />
                </Carousel.Item>
              )}
            </Index>
          </Carousel.ItemGroup>
          <Carousel.NextTrigger class={styles.Trigger}>
            <ArrowRightIcon />
          </Carousel.NextTrigger>
        </Carousel.Control>
        <Carousel.IndicatorGroup class={styles.IndicatorGroup}>
          <Index each={images}>{(_, index) => <Carousel.Indicator class={styles.Indicator} index={index} />}</Index>
        </Carousel.IndicatorGroup>
      </Carousel.RootProvider>
    </div>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Carousel, useCarousel } from '@ark-ui/vue/carousel'
import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-vue-next'
import styles from 'styles/carousel.module.css'

const images = [
  { src: 'https://picsum.photos/seed/1/500/300', alt: 'Nature landscape' },
  { src: 'https://picsum.photos/seed/2/500/300', alt: 'City skyline' },
  { src: 'https://picsum.photos/seed/3/500/300', alt: 'Mountain view' },
  { src: 'https://picsum.photos/seed/4/500/300', alt: 'Ocean sunset' },
  { src: 'https://picsum.photos/seed/5/500/300', alt: 'Forest path' },
]

const carousel = useCarousel({ slideCount: images.length })
</script>

<template>
  <div class="vstack">
    <output>Page: {{ carousel.page }}</output>
    <Carousel.RootProvider :class="styles.Root" :value="carousel">
      <Carousel.Control :class="styles.Control">
        <Carousel.PrevTrigger :class="styles.Trigger">
          <ArrowLeftIcon />
        </Carousel.PrevTrigger>
        <Carousel.ItemGroup :class="styles.ItemGroup">
          <Carousel.Item v-for="(image, index) in images" :key="index" :class="styles.Item" :index="index">
            <img :src="image.src" :alt="image.alt" width="500" height="300" />
          </Carousel.Item>
        </Carousel.ItemGroup>
        <Carousel.NextTrigger :class="styles.Trigger">
          <ArrowRightIcon />
        </Carousel.NextTrigger>
      </Carousel.Control>
      <Carousel.IndicatorGroup :class="styles.IndicatorGroup">
        <Carousel.Indicator v-for="(_, index) in images" :key="index" :class="styles.Indicator" :index="index" />
      </Carousel.IndicatorGroup>
    </Carousel.RootProvider>
  </div>
</template>

```

#### Svelte

```svelte
<script>
  import { Carousel, useCarousel } from '@ark-ui/svelte/carousel'
  import ArrowLeftIcon from 'lucide-svelte/icons/arrow-left'
  import ArrowRightIcon from 'lucide-svelte/icons/arrow-right'
  import styles from 'styles/carousel.module.css'

  const images = [
    { src: 'https://picsum.photos/seed/1/500/300', alt: 'Nature landscape' },
    { src: 'https://picsum.photos/seed/2/500/300', alt: 'City skyline' },
    { src: 'https://picsum.photos/seed/3/500/300', alt: 'Mountain view' },
    { src: 'https://picsum.photos/seed/4/500/300', alt: 'Ocean sunset' },
    { src: 'https://picsum.photos/seed/5/500/300', alt: 'Forest path' },
  ]

  const id = $props.id()
  const carousel = useCarousel({
    id,
    defaultPage: 0,
    slideCount: images.length,
  })
</script>

<div class="vstack">
  <output>Page: {carousel().page}</output>
  <Carousel.RootProvider class={styles.Root} value={carousel}>
    <Carousel.Control class={styles.Control}>
      <Carousel.PrevTrigger class={styles.Trigger}>
        <ArrowLeftIcon />
      </Carousel.PrevTrigger>
      <Carousel.ItemGroup class={styles.ItemGroup}>
        {#each images as image, index}
          <Carousel.Item class={styles.Item} {index}>
            <img src={image.src} alt={image.alt} width="500" height="300" />
          </Carousel.Item>
        {/each}
      </Carousel.ItemGroup>
      <Carousel.NextTrigger class={styles.Trigger}>
        <ArrowRightIcon />
      </Carousel.NextTrigger>
    </Carousel.Control>
    <Carousel.IndicatorGroup class={styles.IndicatorGroup}>
      {#each images as _, index}
        <Carousel.Indicator class={styles.Indicator} {index} />
      {/each}
    </Carousel.IndicatorGroup>
  </Carousel.RootProvider>
</div>

```

### Autoplay

Pass the `autoplay` and `loop` props to `Carousel.Root` to make the carousel play automatically.

**Example: autoplay**

#### React

```tsx
import { Carousel } from '@ark-ui/react/carousel'
import { ChevronLeftIcon, ChevronRightIcon, PauseIcon, PlayIcon } from 'lucide-react'
import styles from 'styles/carousel.module.css'

const images = [
  { src: 'https://picsum.photos/seed/1/500/300', alt: 'Nature landscape' },
  { src: 'https://picsum.photos/seed/2/500/300', alt: 'City skyline' },
  { src: 'https://picsum.photos/seed/3/500/300', alt: 'Mountain view' },
  { src: 'https://picsum.photos/seed/4/500/300', alt: 'Ocean sunset' },
  { src: 'https://picsum.photos/seed/5/500/300', alt: 'Forest path' },
]

export const Autoplay = () => {
  return (
    <Carousel.Root className={styles.Root} slideCount={images.length} autoplay loop>
      <Carousel.ItemGroup className={styles.ItemGroup}>
        {images.map((image, index) => (
          <Carousel.Item className={styles.Item} key={index} index={index}>
            <img src={image.src} alt={image.alt} width="500" height="300" />
          </Carousel.Item>
        ))}
      </Carousel.ItemGroup>
      <Carousel.Control className={styles.Control} data-justify="center">
        <Carousel.PrevTrigger className={styles.Trigger}>
          <ChevronLeftIcon />
        </Carousel.PrevTrigger>
        <Carousel.AutoplayTrigger className={styles.AutoplayTrigger}>
          <Carousel.AutoplayIndicator fallback={<PlayIcon />}>
            <PauseIcon />
          </Carousel.AutoplayIndicator>
        </Carousel.AutoplayTrigger>
        <Carousel.NextTrigger className={styles.Trigger}>
          <ChevronRightIcon />
        </Carousel.NextTrigger>
      </Carousel.Control>
    </Carousel.Root>
  )
}

```

#### Solid

```tsx
import { Carousel } from '@ark-ui/solid/carousel'
import { ChevronLeftIcon, ChevronRightIcon, PauseIcon, PlayIcon } from 'lucide-solid'
import { Index } from 'solid-js'
import styles from 'styles/carousel.module.css'

const images = [
  { src: 'https://picsum.photos/seed/1/500/300', alt: 'Nature landscape' },
  { src: 'https://picsum.photos/seed/2/500/300', alt: 'City skyline' },
  { src: 'https://picsum.photos/seed/3/500/300', alt: 'Mountain view' },
  { src: 'https://picsum.photos/seed/4/500/300', alt: 'Ocean sunset' },
  { src: 'https://picsum.photos/seed/5/500/300', alt: 'Forest path' },
]

export const Autoplay = () => {
  return (
    <Carousel.Root class={styles.Root} slideCount={images.length} autoplay loop>
      <Carousel.ItemGroup class={styles.ItemGroup}>
        <Index each={images}>
          {(image, index) => (
            <Carousel.Item class={styles.Item} index={index}>
              <img src={image().src} alt={image().alt} width="500" height="300" />
            </Carousel.Item>
          )}
        </Index>
      </Carousel.ItemGroup>
      <Carousel.Control class={styles.Control} data-justify="center">
        <Carousel.PrevTrigger class={styles.Trigger}>
          <ChevronLeftIcon />
        </Carousel.PrevTrigger>
        <Carousel.AutoplayTrigger class={styles.AutoplayTrigger}>
          <Carousel.AutoplayIndicator fallback={<PlayIcon />}>
            <PauseIcon />
          </Carousel.AutoplayIndicator>
        </Carousel.AutoplayTrigger>
        <Carousel.NextTrigger class={styles.Trigger}>
          <ChevronRightIcon />
        </Carousel.NextTrigger>
      </Carousel.Control>
    </Carousel.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Carousel } from '@ark-ui/vue/carousel'
import { ArrowLeftIcon, ArrowRightIcon, PauseIcon, PlayIcon } from 'lucide-vue-next'
import styles from 'styles/carousel.module.css'

const images = [
  { src: 'https://picsum.photos/seed/1/500/300', alt: 'Nature landscape' },
  { src: 'https://picsum.photos/seed/2/500/300', alt: 'City skyline' },
  { src: 'https://picsum.photos/seed/3/500/300', alt: 'Mountain view' },
  { src: 'https://picsum.photos/seed/4/500/300', alt: 'Ocean sunset' },
  { src: 'https://picsum.photos/seed/5/500/300', alt: 'Forest path' },
]
</script>

<template>
  <Carousel.Root :class="styles.Root" :slide-count="images.length" autoplay loop>
    <Carousel.ItemGroup :class="styles.ItemGroup">
      <Carousel.Item v-for="(image, index) in images" :key="index" :class="styles.Item" :index="index">
        <img :src="image.src" :alt="image.alt" width="500" height="300" />
      </Carousel.Item>
    </Carousel.ItemGroup>
    <Carousel.Control :class="styles.Control" data-justify="center">
      <Carousel.PrevTrigger :class="styles.Trigger">
        <ArrowLeftIcon />
      </Carousel.PrevTrigger>
      <Carousel.AutoplayTrigger :class="styles.AutoplayTrigger">
        <Carousel.AutoplayIndicator>
          <template #fallback><PlayIcon /></template>
          <PauseIcon />
        </Carousel.AutoplayIndicator>
      </Carousel.AutoplayTrigger>
      <Carousel.NextTrigger :class="styles.Trigger">
        <ArrowRightIcon />
      </Carousel.NextTrigger>
    </Carousel.Control>
  </Carousel.Root>
</template>

```

#### Svelte

```svelte
<script>
  import { Carousel } from '@ark-ui/svelte/carousel'
  import ArrowLeftIcon from 'lucide-svelte/icons/arrow-left'
  import ArrowRightIcon from 'lucide-svelte/icons/arrow-right'
  import PauseIcon from 'lucide-svelte/icons/pause'
  import PlayIcon from 'lucide-svelte/icons/play'
  import styles from 'styles/carousel.module.css'

  const images = [
    { src: 'https://picsum.photos/seed/1/500/300', alt: 'Nature landscape' },
    { src: 'https://picsum.photos/seed/2/500/300', alt: 'City skyline' },
    { src: 'https://picsum.photos/seed/3/500/300', alt: 'Mountain view' },
    { src: 'https://picsum.photos/seed/4/500/300', alt: 'Ocean sunset' },
    { src: 'https://picsum.photos/seed/5/500/300', alt: 'Forest path' },
  ]
</script>

<Carousel.Root class={styles.Root} slideCount={images.length} autoplay loop>
  <Carousel.ItemGroup class={styles.ItemGroup}>
    {#each images as image, index}
      <Carousel.Item class={styles.Item} {index}>
        <img src={image.src} alt={image.alt} width="500" height="300" />
      </Carousel.Item>
    {/each}
  </Carousel.ItemGroup>
  <Carousel.Control class={styles.Control} data-justify="center">
    <Carousel.PrevTrigger class={styles.Trigger}>
      <ArrowLeftIcon />
    </Carousel.PrevTrigger>
    <Carousel.AutoplayTrigger class={styles.AutoplayTrigger}>
      <Carousel.AutoplayIndicator>
        {#snippet fallback()}<PlayIcon />{/snippet}
        <PauseIcon />
      </Carousel.AutoplayIndicator>
    </Carousel.AutoplayTrigger>
    <Carousel.NextTrigger class={styles.Trigger}>
      <ArrowRightIcon />
    </Carousel.NextTrigger>
  </Carousel.Control>
</Carousel.Root>

```

### Pause on Hover

This feature isn't built-in, but you can use the `play()` and `pause()` methods from `Carousel.Context` to implement
pause on hover.

**Example: pause-on-hover**

#### React

```tsx
import { Carousel } from '@ark-ui/react/carousel'
import styles from 'styles/carousel.module.css'

const images = [
  { src: 'https://picsum.photos/seed/1/500/300', alt: 'Nature landscape' },
  { src: 'https://picsum.photos/seed/2/500/300', alt: 'City skyline' },
  { src: 'https://picsum.photos/seed/3/500/300', alt: 'Mountain view' },
  { src: 'https://picsum.photos/seed/4/500/300', alt: 'Ocean sunset' },
  { src: 'https://picsum.photos/seed/5/500/300', alt: 'Forest path' },
]

export const PauseOnHover = () => {
  return (
    <Carousel.Root className={styles.Root} slideCount={images.length} autoplay loop>
      <Carousel.Control className={styles.Control}>
        <Carousel.Context>
          {({ isPlaying }) => (
            <span className={styles.StatusText}>Autoplay is: {isPlaying ? 'playing' : 'paused'}</span>
          )}
        </Carousel.Context>
      </Carousel.Control>
      <Carousel.Context>
        {(api) => (
          <Carousel.ItemGroup
            className={styles.ItemGroup}
            onPointerOver={() => api.pause()}
            onPointerLeave={() => api.play()}
          >
            {images.map((image, index) => (
              <Carousel.Item className={styles.Item} key={index} index={index}>
                <img src={image.src} alt={image.alt} width="500" height="300" />
              </Carousel.Item>
            ))}
          </Carousel.ItemGroup>
        )}
      </Carousel.Context>
      <Carousel.IndicatorGroup className={styles.IndicatorGroup}>
        {images.map((_, index) => (
          <Carousel.Indicator className={styles.Indicator} key={index} index={index} />
        ))}
      </Carousel.IndicatorGroup>
    </Carousel.Root>
  )
}

```

#### Solid

```tsx
import { Carousel } from '@ark-ui/solid/carousel'
import { Index } from 'solid-js'
import styles from 'styles/carousel.module.css'

const images = [
  { src: 'https://picsum.photos/seed/1/500/300', alt: 'Nature landscape' },
  { src: 'https://picsum.photos/seed/2/500/300', alt: 'City skyline' },
  { src: 'https://picsum.photos/seed/3/500/300', alt: 'Mountain view' },
  { src: 'https://picsum.photos/seed/4/500/300', alt: 'Ocean sunset' },
  { src: 'https://picsum.photos/seed/5/500/300', alt: 'Forest path' },
]

export const PauseOnHover = () => {
  return (
    <Carousel.Root class={styles.Root} slideCount={images.length} autoplay loop>
      <Carousel.Control class={styles.Control}>
        <Carousel.Context>
          {(carousel) => (
            <span class={styles.StatusText}>Autoplay is: {carousel().isPlaying ? 'playing' : 'paused'}</span>
          )}
        </Carousel.Context>
      </Carousel.Control>
      <Carousel.Context>
        {(api) => (
          <Carousel.ItemGroup
            class={styles.ItemGroup}
            onPointerOver={() => api().pause()}
            onPointerLeave={() => api().play()}
          >
            <Index each={images}>
              {(image, index) => (
                <Carousel.Item class={styles.Item} index={index}>
                  <img src={image().src} alt={image().alt} width="500" height="300" />
                </Carousel.Item>
              )}
            </Index>
          </Carousel.ItemGroup>
        )}
      </Carousel.Context>
      <Carousel.IndicatorGroup class={styles.IndicatorGroup}>
        <Index each={images}>{(_, index) => <Carousel.Indicator class={styles.Indicator} index={index} />}</Index>
      </Carousel.IndicatorGroup>
    </Carousel.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Carousel } from '@ark-ui/vue/carousel'
import styles from 'styles/carousel.module.css'

const images = [
  { src: 'https://picsum.photos/seed/1/500/300', alt: 'Nature landscape' },
  { src: 'https://picsum.photos/seed/2/500/300', alt: 'City skyline' },
  { src: 'https://picsum.photos/seed/3/500/300', alt: 'Mountain view' },
  { src: 'https://picsum.photos/seed/4/500/300', alt: 'Ocean sunset' },
  { src: 'https://picsum.photos/seed/5/500/300', alt: 'Forest path' },
]
</script>

<template>
  <Carousel.Root :class="styles.Root" :slide-count="images.length" autoplay loop>
    <Carousel.Control :class="styles.Control">
      <Carousel.Context v-slot="api">
        <span :class="styles.StatusText">Autoplay is: {{ api.isPlaying ? 'playing' : 'paused' }}</span>
      </Carousel.Context>
    </Carousel.Control>
    <Carousel.Context v-slot="api">
      <Carousel.ItemGroup :class="styles.ItemGroup" @pointerover="api.pause()" @pointerleave="api.play()">
        <Carousel.Item v-for="(image, index) in images" :key="index" :class="styles.Item" :index="index">
          <img :src="image.src" :alt="image.alt" width="500" height="300" />
        </Carousel.Item>
      </Carousel.ItemGroup>
    </Carousel.Context>
    <Carousel.IndicatorGroup :class="styles.IndicatorGroup">
      <Carousel.Indicator v-for="(_, index) in images" :key="index" :class="styles.Indicator" :index="index" />
    </Carousel.IndicatorGroup>
  </Carousel.Root>
</template>

```

#### Svelte

```svelte
<script>
  import { Carousel } from '@ark-ui/svelte/carousel'
  import styles from 'styles/carousel.module.css'

  const images = [
    { src: 'https://picsum.photos/seed/1/500/300', alt: 'Nature landscape' },
    { src: 'https://picsum.photos/seed/2/500/300', alt: 'City skyline' },
    { src: 'https://picsum.photos/seed/3/500/300', alt: 'Mountain view' },
    { src: 'https://picsum.photos/seed/4/500/300', alt: 'Ocean sunset' },
    { src: 'https://picsum.photos/seed/5/500/300', alt: 'Forest path' },
  ]
</script>

<Carousel.Root class={styles.Root} slideCount={images.length} autoplay loop>
  <Carousel.Control class={styles.Control}>
    <Carousel.Context>
      {#snippet render(api)}
        <span class={styles.StatusText}>Autoplay is: {api().isPlaying ? 'playing' : 'paused'}</span>
      {/snippet}
    </Carousel.Context>
  </Carousel.Control>
  <Carousel.Context>
    {#snippet render(api)}
      <Carousel.ItemGroup
        class={styles.ItemGroup}
        onpointerover={() => api().pause()}
        onpointerleave={() => api().play()}
      >
        {#each images as image, index}
          <Carousel.Item class={styles.Item} {index}>
            <img src={image.src} alt={image.alt} width="500" height="300" />
          </Carousel.Item>
        {/each}
      </Carousel.ItemGroup>
    {/snippet}
  </Carousel.Context>
  <Carousel.IndicatorGroup class={styles.IndicatorGroup}>
    {#each images as _, index}
      <Carousel.Indicator class={styles.Indicator} {index} />
    {/each}
  </Carousel.IndicatorGroup>
</Carousel.Root>

```

### Thumbnail Indicators

Replace default indicator dots with image thumbnails. Render each thumbnail inside `Carousel.Indicator` to create a
visual preview of each slide:

**Example: thumbnail-indicator**

#### React

```tsx
import { Carousel } from '@ark-ui/react/carousel'
import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react'
import styles from 'styles/carousel.module.css'

const images = [
  { src: 'https://picsum.photos/seed/1/500/300', alt: 'Nature landscape' },
  { src: 'https://picsum.photos/seed/2/500/300', alt: 'City skyline' },
  { src: 'https://picsum.photos/seed/3/500/300', alt: 'Mountain view' },
  { src: 'https://picsum.photos/seed/4/500/300', alt: 'Ocean sunset' },
  { src: 'https://picsum.photos/seed/5/500/300', alt: 'Forest path' },
]

export const ThumbnailIndicator = () => {
  return (
    <Carousel.Root className={styles.Root} defaultPage={0} slideCount={images.length}>
      <Carousel.Control className={styles.Control}>
        <Carousel.PrevTrigger className={styles.Trigger}>
          <ArrowLeftIcon />
        </Carousel.PrevTrigger>
        <Carousel.ItemGroup className={styles.ItemGroup}>
          {images.map((image, index) => (
            <Carousel.Item className={styles.Item} key={index} index={index}>
              <img src={image.src} alt={image.alt} width="500" height="300" />
            </Carousel.Item>
          ))}
        </Carousel.ItemGroup>
        <Carousel.NextTrigger className={styles.Trigger}>
          <ArrowRightIcon />
        </Carousel.NextTrigger>
      </Carousel.Control>
      <Carousel.IndicatorGroup className={styles.IndicatorGroup}>
        {images.map((image, index) => (
          <Carousel.Indicator className={styles.ThumbnailIndicator} key={index} index={index}>
            <img src={image.src} alt={image.alt} width="500" height="300" />
          </Carousel.Indicator>
        ))}
      </Carousel.IndicatorGroup>
    </Carousel.Root>
  )
}

```

#### Solid

```tsx
import { Carousel } from '@ark-ui/solid/carousel'
import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-solid'
import { Index } from 'solid-js'
import styles from 'styles/carousel.module.css'

const images = [
  { src: 'https://picsum.photos/seed/1/500/300', alt: 'Nature landscape' },
  { src: 'https://picsum.photos/seed/2/500/300', alt: 'City skyline' },
  { src: 'https://picsum.photos/seed/3/500/300', alt: 'Mountain view' },
  { src: 'https://picsum.photos/seed/4/500/300', alt: 'Ocean sunset' },
  { src: 'https://picsum.photos/seed/5/500/300', alt: 'Forest path' },
]

export const ThumbnailIndicator = () => {
  return (
    <Carousel.Root class={styles.Root} slideCount={images.length}>
      <Carousel.Control class={styles.Control}>
        <Carousel.PrevTrigger class={styles.Trigger}>
          <ArrowLeftIcon />
        </Carousel.PrevTrigger>
        <Carousel.ItemGroup class={styles.ItemGroup}>
          <Index each={images}>
            {(image, index) => (
              <Carousel.Item class={styles.Item} index={index}>
                <img src={image().src} alt={image().alt} width="500" height="300" />
              </Carousel.Item>
            )}
          </Index>
        </Carousel.ItemGroup>
        <Carousel.NextTrigger class={styles.Trigger}>
          <ArrowRightIcon />
        </Carousel.NextTrigger>
      </Carousel.Control>
      <Carousel.IndicatorGroup class={styles.IndicatorGroup}>
        <Index each={images}>
          {(image, index) => (
            <Carousel.Indicator class={styles.ThumbnailIndicator} index={index}>
              <img src={image().src} alt={image().alt} width="500" height="300" />
            </Carousel.Indicator>
          )}
        </Index>
      </Carousel.IndicatorGroup>
    </Carousel.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Carousel } from '@ark-ui/vue/carousel'
import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-vue-next'
import styles from 'styles/carousel.module.css'

const images = [
  { src: 'https://picsum.photos/seed/1/500/300', alt: 'Nature landscape' },
  { src: 'https://picsum.photos/seed/2/500/300', alt: 'City skyline' },
  { src: 'https://picsum.photos/seed/3/500/300', alt: 'Mountain view' },
  { src: 'https://picsum.photos/seed/4/500/300', alt: 'Ocean sunset' },
  { src: 'https://picsum.photos/seed/5/500/300', alt: 'Forest path' },
]
</script>

<template>
  <Carousel.Root :class="styles.Root" :slide-count="images.length">
    <Carousel.Control :class="styles.Control">
      <Carousel.PrevTrigger :class="styles.Trigger">
        <ArrowLeftIcon />
      </Carousel.PrevTrigger>
      <Carousel.ItemGroup :class="styles.ItemGroup">
        <Carousel.Item v-for="(image, index) in images" :key="index" :class="styles.Item" :index="index">
          <img :src="image.src" :alt="image.alt" width="500" height="300" />
        </Carousel.Item>
      </Carousel.ItemGroup>
      <Carousel.NextTrigger :class="styles.Trigger">
        <ArrowRightIcon />
      </Carousel.NextTrigger>
    </Carousel.Control>
    <Carousel.IndicatorGroup :class="styles.IndicatorGroup">
      <Carousel.Indicator
        v-for="(image, index) in images"
        :key="index"
        :class="styles.ThumbnailIndicator"
        :index="index"
      >
        <img :src="image.src" :alt="image.alt" width="500" height="300" />
      </Carousel.Indicator>
    </Carousel.IndicatorGroup>
  </Carousel.Root>
</template>

```

#### Svelte

```svelte
<script>
  import { Carousel } from '@ark-ui/svelte/carousel'
  import ArrowLeftIcon from 'lucide-svelte/icons/arrow-left'
  import ArrowRightIcon from 'lucide-svelte/icons/arrow-right'
  import styles from 'styles/carousel.module.css'

  const images = [
    { src: 'https://picsum.photos/seed/1/500/300', alt: 'Nature landscape' },
    { src: 'https://picsum.photos/seed/2/500/300', alt: 'City skyline' },
    { src: 'https://picsum.photos/seed/3/500/300', alt: 'Mountain view' },
    { src: 'https://picsum.photos/seed/4/500/300', alt: 'Ocean sunset' },
    { src: 'https://picsum.photos/seed/5/500/300', alt: 'Forest path' },
  ]
</script>

<Carousel.Root class={styles.Root} slideCount={images.length}>
  <Carousel.Control class={styles.Control}>
    <Carousel.PrevTrigger class={styles.Trigger}>
      <ArrowLeftIcon />
    </Carousel.PrevTrigger>
    <Carousel.ItemGroup class={styles.ItemGroup}>
      {#each images as image, index}
        <Carousel.Item class={styles.Item} {index}>
          <img src={image.src} alt={image.alt} width="500" height="300" />
        </Carousel.Item>
      {/each}
    </Carousel.ItemGroup>
    <Carousel.NextTrigger class={styles.Trigger}>
      <ArrowRightIcon />
    </Carousel.NextTrigger>
  </Carousel.Control>
  <Carousel.IndicatorGroup class={styles.IndicatorGroup}>
    {#each images as image, index}
      <Carousel.Indicator class={styles.ThumbnailIndicator} {index}>
        <img src={image.src} alt={image.alt} width="500" height="300" />
      </Carousel.Indicator>
    {/each}
  </Carousel.IndicatorGroup>
</Carousel.Root>

```

### Vertical

Add the `orientation="vertical"` prop to `Carousel.Root` to switch the carousel to vertical scrolling. This can be
helpful for displaying vertical galleries or content feeds.

**Example: vertical**

#### React

```tsx
import { Carousel } from '@ark-ui/react/carousel'
import { ArrowDownIcon, ArrowUpIcon } from 'lucide-react'
import styles from 'styles/carousel.module.css'

const images = [
  { src: 'https://picsum.photos/seed/1/500/300', alt: 'Nature landscape' },
  { src: 'https://picsum.photos/seed/2/500/300', alt: 'City skyline' },
  { src: 'https://picsum.photos/seed/3/500/300', alt: 'Mountain view' },
  { src: 'https://picsum.photos/seed/4/500/300', alt: 'Ocean sunset' },
  { src: 'https://picsum.photos/seed/5/500/300', alt: 'Forest path' },
]

export const Vertical = () => {
  return (
    <Carousel.Root className={styles.Root} defaultPage={0} orientation="vertical" slideCount={images.length}>
      <Carousel.ItemGroup className={styles.ItemGroup}>
        {images.map((image, index) => (
          <Carousel.Item className={styles.Item} key={index} index={index}>
            <img src={image.src} alt={image.alt} width="500" height="300" />
          </Carousel.Item>
        ))}
      </Carousel.ItemGroup>
      <Carousel.Control className={styles.Control}>
        <Carousel.PrevTrigger className={styles.Trigger}>
          <ArrowUpIcon />
        </Carousel.PrevTrigger>
        <Carousel.IndicatorGroup className={styles.IndicatorGroup}>
          {images.map((_, index) => (
            <Carousel.Indicator className={styles.Indicator} key={index} index={index} />
          ))}
        </Carousel.IndicatorGroup>
        <Carousel.NextTrigger className={styles.Trigger}>
          <ArrowDownIcon />
        </Carousel.NextTrigger>
      </Carousel.Control>
    </Carousel.Root>
  )
}

```

#### Solid

```tsx
import { Carousel } from '@ark-ui/solid/carousel'
import { ArrowDownIcon, ArrowUpIcon } from 'lucide-solid'
import { Index } from 'solid-js'
import styles from 'styles/carousel.module.css'

const images = [
  { src: 'https://picsum.photos/seed/1/500/300', alt: 'Nature landscape' },
  { src: 'https://picsum.photos/seed/2/500/300', alt: 'City skyline' },
  { src: 'https://picsum.photos/seed/3/500/300', alt: 'Mountain view' },
  { src: 'https://picsum.photos/seed/4/500/300', alt: 'Ocean sunset' },
  { src: 'https://picsum.photos/seed/5/500/300', alt: 'Forest path' },
]

export const Vertical = () => {
  return (
    <Carousel.Root class={styles.Root} orientation="vertical" slideCount={images.length}>
      <Carousel.ItemGroup class={styles.ItemGroup}>
        <Index each={images}>
          {(image, index) => (
            <Carousel.Item class={styles.Item} index={index}>
              <img src={image().src} alt={image().alt} width="500" height="300" />
            </Carousel.Item>
          )}
        </Index>
      </Carousel.ItemGroup>
      <Carousel.Control class={styles.Control}>
        <Carousel.PrevTrigger class={styles.Trigger}>
          <ArrowUpIcon />
        </Carousel.PrevTrigger>
        <Carousel.IndicatorGroup class={styles.IndicatorGroup}>
          <Index each={images}>{(_, index) => <Carousel.Indicator class={styles.Indicator} index={index} />}</Index>
        </Carousel.IndicatorGroup>
        <Carousel.NextTrigger class={styles.Trigger}>
          <ArrowDownIcon />
        </Carousel.NextTrigger>
      </Carousel.Control>
    </Carousel.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Carousel } from '@ark-ui/vue/carousel'
import { ArrowUpIcon, ArrowDownIcon } from 'lucide-vue-next'
import styles from 'styles/carousel.module.css'

const images = [
  { src: 'https://picsum.photos/seed/1/500/300', alt: 'Nature landscape' },
  { src: 'https://picsum.photos/seed/2/500/300', alt: 'City skyline' },
  { src: 'https://picsum.photos/seed/3/500/300', alt: 'Mountain view' },
  { src: 'https://picsum.photos/seed/4/500/300', alt: 'Ocean sunset' },
  { src: 'https://picsum.photos/seed/5/500/300', alt: 'Forest path' },
]
</script>

<template>
  <Carousel.Root :class="styles.Root" orientation="vertical" :slide-count="images.length">
    <Carousel.Control :class="styles.Control">
      <Carousel.PrevTrigger :class="styles.Trigger">
        <ArrowUpIcon />
      </Carousel.PrevTrigger>
      <Carousel.NextTrigger :class="styles.Trigger">
        <ArrowDownIcon />
      </Carousel.NextTrigger>
    </Carousel.Control>
    <Carousel.ItemGroup :class="styles.ItemGroup">
      <Carousel.Item v-for="(image, index) in images" :key="index" :class="styles.Item" :index="index">
        <img :src="image.src" :alt="image.alt" width="500" height="300" />
      </Carousel.Item>
    </Carousel.ItemGroup>
    <Carousel.IndicatorGroup :class="styles.IndicatorGroup">
      <Carousel.Indicator v-for="(_, index) in images" :key="index" :class="styles.Indicator" :index="index" />
    </Carousel.IndicatorGroup>
  </Carousel.Root>
</template>

```

#### Svelte

```svelte
<script>
  import { Carousel } from '@ark-ui/svelte/carousel'
  import ArrowUpIcon from 'lucide-svelte/icons/arrow-up'
  import ArrowDownIcon from 'lucide-svelte/icons/arrow-down'
  import styles from 'styles/carousel.module.css'

  const images = [
    { src: 'https://picsum.photos/seed/1/500/300', alt: 'Nature landscape' },
    { src: 'https://picsum.photos/seed/2/500/300', alt: 'City skyline' },
    { src: 'https://picsum.photos/seed/3/500/300', alt: 'Mountain view' },
    { src: 'https://picsum.photos/seed/4/500/300', alt: 'Ocean sunset' },
    { src: 'https://picsum.photos/seed/5/500/300', alt: 'Forest path' },
  ]
</script>

<Carousel.Root class={styles.Root} orientation="vertical" slideCount={images.length}>
  <Carousel.Control class={styles.Control}>
    <Carousel.PrevTrigger class={styles.Trigger}>
      <ArrowUpIcon />
    </Carousel.PrevTrigger>
    <Carousel.NextTrigger class={styles.Trigger}>
      <ArrowDownIcon />
    </Carousel.NextTrigger>
  </Carousel.Control>
  <Carousel.ItemGroup class={styles.ItemGroup}>
    {#each images as image, index}
      <Carousel.Item class={styles.Item} {index}>
        <img src={image.src} alt={image.alt} width="500" height="300" />
      </Carousel.Item>
    {/each}
  </Carousel.ItemGroup>
  <Carousel.IndicatorGroup class={styles.IndicatorGroup}>
    {#each images as _, index}
      <Carousel.Indicator class={styles.Indicator} {index} />
    {/each}
  </Carousel.IndicatorGroup>
</Carousel.Root>

```

### Dynamic

Manage slides dynamically by storing them in state and syncing the carousel page. Pass the `page` prop and
`onPageChange` handler to `Carousel.Root`, and update `slideCount` when slides are added or removed. This demonstrates
bidirectional state synchronization between your component state and the carousel.

**Example: dynamic-slides**

#### React

```tsx
import { Carousel } from '@ark-ui/react/carousel'
import { ArrowLeftIcon, ArrowRightIcon, PlusIcon } from 'lucide-react'
import { useState } from 'react'
import button from 'styles/button.module.css'
import styles from 'styles/carousel.module.css'

export const DynamicSlides = () => {
  const [slides, setSlides] = useState([0, 1, 2, 3, 4])
  const [page, setPage] = useState(0)

  const addSlide = () => {
    setSlides((prevSlides) => {
      const max = Math.max(...prevSlides)
      return [...prevSlides, max + 1]
    })
  }

  return (
    <div className="stack">
      <Carousel.Root
        className={styles.Root}
        slideCount={slides.length}
        page={page}
        onPageChange={(details) => setPage(details.page)}
      >
        <Carousel.ItemGroup className={styles.ItemGroup}>
          {slides.map((slide, index) => (
            <Carousel.Item className={styles.Item} key={index} index={index}>
              <div className={styles.Slide}>Slide {slide + 1}</div>
            </Carousel.Item>
          ))}
        </Carousel.ItemGroup>
        <Carousel.Control className={styles.Control}>
          <Carousel.PrevTrigger className={styles.Trigger}>
            <ArrowLeftIcon />
          </Carousel.PrevTrigger>
          <Carousel.IndicatorGroup className={styles.IndicatorGroup}>
            {slides.map((_, index) => (
              <Carousel.Indicator className={styles.Indicator} key={index} index={index} />
            ))}
          </Carousel.IndicatorGroup>
          <Carousel.NextTrigger className={styles.Trigger}>
            <ArrowRightIcon />
          </Carousel.NextTrigger>
        </Carousel.Control>
      </Carousel.Root>
      <button className={button.Root} onClick={addSlide}>
        <PlusIcon />
        Add Slide
      </button>
    </div>
  )
}

```

#### Solid

```tsx
import { Carousel } from '@ark-ui/solid/carousel'
import { ArrowLeftIcon, ArrowRightIcon, PlusIcon } from 'lucide-solid'
import { Index, createSignal } from 'solid-js'
import button from 'styles/button.module.css'
import styles from 'styles/carousel.module.css'

export const DynamicSlides = () => {
  const [slides, setSlides] = createSignal([0, 1, 2, 3, 4])
  const [page, setPage] = createSignal(0)

  const addSlide = () => {
    setSlides((prevSlides) => {
      const max = Math.max(...prevSlides)
      return [...prevSlides, max + 1]
    })
  }

  return (
    <div class="stack">
      <Carousel.Root
        class={styles.Root}
        slideCount={slides().length}
        page={page()}
        onPageChange={(details) => setPage(details.page)}
      >
        <Carousel.ItemGroup class={styles.ItemGroup}>
          <Index each={slides()}>
            {(slide, index) => (
              <Carousel.Item class={styles.Item} index={index}>
                <div class={styles.Slide}>Slide {slide() + 1}</div>
              </Carousel.Item>
            )}
          </Index>
        </Carousel.ItemGroup>
        <Carousel.Control class={styles.Control}>
          <Carousel.PrevTrigger class={styles.Trigger}>
            <ArrowLeftIcon />
          </Carousel.PrevTrigger>
          <Carousel.IndicatorGroup class={styles.IndicatorGroup}>
            <Index each={slides()}>{(_, index) => <Carousel.Indicator class={styles.Indicator} index={index} />}</Index>
          </Carousel.IndicatorGroup>
          <Carousel.NextTrigger class={styles.Trigger}>
            <ArrowRightIcon />
          </Carousel.NextTrigger>
        </Carousel.Control>
      </Carousel.Root>
      <button class={button.Root} onClick={addSlide}>
        <PlusIcon />
        Add Slide
      </button>
    </div>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Carousel } from '@ark-ui/vue/carousel'
import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-vue-next'
import { ref } from 'vue'
import button from 'styles/button.module.css'
import styles from 'styles/carousel.module.css'

const slides = ref([0, 1, 2, 3, 4])

const addSlide = () => {
  const max = Math.max(...slides.value)
  slides.value = [...slides.value, max + 1]
}
</script>

<template>
  <div>
    <button :class="button.Root" @click="addSlide">Add Slide</button>
    <Carousel.Root :class="styles.Root" :slide-count="slides.length">
      <Carousel.ItemGroup :class="styles.ItemGroup">
        <Carousel.Item v-for="(slide, index) in slides" :key="index" :class="styles.Item" :index="index">
          <div :class="styles.Slide">Slide {{ slide + 1 }}</div>
        </Carousel.Item>
      </Carousel.ItemGroup>
      <Carousel.Control :class="styles.Control" data-align="center">
        <Carousel.PrevTrigger :class="styles.Trigger">
          <ArrowLeftIcon />
        </Carousel.PrevTrigger>
        <Carousel.IndicatorGroup :class="styles.IndicatorGroup">
          <Carousel.Indicator v-for="(_, index) in slides" :key="index" :class="styles.Indicator" :index="index" />
        </Carousel.IndicatorGroup>
        <Carousel.NextTrigger :class="styles.Trigger">
          <ArrowRightIcon />
        </Carousel.NextTrigger>
      </Carousel.Control>
    </Carousel.Root>
  </div>
</template>

```

#### Svelte

```svelte
<script>
  import { Carousel } from '@ark-ui/svelte/carousel'
  import ArrowLeftIcon from 'lucide-svelte/icons/arrow-left'
  import ArrowRightIcon from 'lucide-svelte/icons/arrow-right'
  import button from 'styles/button.module.css'
  import styles from 'styles/carousel.module.css'

  let slides = $state([0, 1, 2, 3, 4])

  function addSlide() {
    const max = Math.max(...slides)
    slides = [...slides, max + 1]
  }
</script>

<div>
  <button class={button.Root} onclick={addSlide}>Add Slide</button>
  <Carousel.Root class={styles.Root} slideCount={slides.length}>
    <Carousel.ItemGroup class={styles.ItemGroup}>
      {#each slides as slide, index}
        <Carousel.Item class={styles.Item} {index}>
          <div class={styles.Slide}>Slide {slide + 1}</div>
        </Carousel.Item>
      {/each}
    </Carousel.ItemGroup>
    <Carousel.Control class={styles.Control} data-align="center">
      <Carousel.PrevTrigger class={styles.Trigger}>
        <ArrowLeftIcon />
      </Carousel.PrevTrigger>
      <Carousel.IndicatorGroup class={styles.IndicatorGroup}>
        {#each slides as _, index}
          <Carousel.Indicator class={styles.Indicator} {index} />
        {/each}
      </Carousel.IndicatorGroup>
      <Carousel.NextTrigger class={styles.Trigger}>
        <ArrowRightIcon />
      </Carousel.NextTrigger>
    </Carousel.Control>
  </Carousel.Root>
</div>

```

### Scroll to Slide

Use `Carousel.Context` to access the carousel API and call `api.scrollToIndex(index)` to programmatically navigate to a
specific slide. This is useful for creating custom navigation or jump-to-slide functionality.

**Example: scroll-to**

#### React

```tsx
import { Carousel } from '@ark-ui/react/carousel'
import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react'
import button from 'styles/button.module.css'
import styles from 'styles/carousel.module.css'

export const ScrollTo = () => {
  return (
    <Carousel.Root className={styles.Root} slideCount={5}>
      <Carousel.Context>
        {(api) => (
          <button className={button.Root} onClick={() => api.scrollToIndex(3)}>
            Go to slide 4
          </button>
        )}
      </Carousel.Context>
      <Carousel.ItemGroup className={styles.ItemGroup}>
        {Array.from({ length: 5 }, (_, index) => (
          <Carousel.Item className={styles.Item} key={index} index={index}>
            <div className={styles.Slide}>Slide {index + 1}</div>
          </Carousel.Item>
        ))}
      </Carousel.ItemGroup>
      <Carousel.Control className={styles.Control}>
        <Carousel.PrevTrigger className={styles.Trigger}>
          <ArrowLeftIcon />
        </Carousel.PrevTrigger>
        <Carousel.NextTrigger className={styles.Trigger}>
          <ArrowRightIcon />
        </Carousel.NextTrigger>
      </Carousel.Control>
      <Carousel.IndicatorGroup className={styles.IndicatorGroup}>
        {Array.from({ length: 5 }, (_, index) => (
          <Carousel.Indicator className={styles.Indicator} key={index} index={index} />
        ))}
      </Carousel.IndicatorGroup>
    </Carousel.Root>
  )
}

```

#### Solid

```tsx
import { Carousel } from '@ark-ui/solid/carousel'
import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-solid'
import { Index } from 'solid-js'
import button from 'styles/button.module.css'
import styles from 'styles/carousel.module.css'

const slides = Array.from({ length: 6 })

export const ScrollTo = () => {
  return (
    <Carousel.Root class={styles.Root} slideCount={slides.length}>
      <Carousel.Context>
        {(api) => (
          <button class={button.Root} onClick={() => api().scrollToIndex(3)}>
            Go to slide 4
          </button>
        )}
      </Carousel.Context>
      <Carousel.ItemGroup class={styles.ItemGroup}>
        <Index each={slides}>
          {(_, index) => (
            <Carousel.Item class={styles.Item} index={index}>
              <div class={styles.Slide}>Slide {index + 1}</div>
            </Carousel.Item>
          )}
        </Index>
      </Carousel.ItemGroup>
      <Carousel.Control class={styles.Control}>
        <Carousel.PrevTrigger class={styles.Trigger}>
          <ArrowLeftIcon />
        </Carousel.PrevTrigger>
        <Carousel.NextTrigger class={styles.Trigger}>
          <ArrowRightIcon />
        </Carousel.NextTrigger>
      </Carousel.Control>
      <Carousel.IndicatorGroup class={styles.IndicatorGroup}>
        <Index each={slides}>{(_, index) => <Carousel.Indicator class={styles.Indicator} index={index} />}</Index>
      </Carousel.IndicatorGroup>
    </Carousel.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Carousel } from '@ark-ui/vue/carousel'
import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-vue-next'
import button from 'styles/button.module.css'
import styles from 'styles/carousel.module.css'

const slides = Array.from({ length: 6 })
</script>

<template>
  <Carousel.Root :class="styles.Root" :slide-count="slides.length">
    <Carousel.Context v-slot="api">
      <button :class="button.Root" @click="api.scrollToIndex(3)">Go to slide 4</button>
    </Carousel.Context>
    <Carousel.ItemGroup :class="styles.ItemGroup">
      <Carousel.Item v-for="(_, index) in slides" :key="index" :class="styles.Item" :index="index">
        <div :class="styles.Slide">Slide {{ index + 1 }}</div>
      </Carousel.Item>
    </Carousel.ItemGroup>
    <Carousel.Control :class="styles.Control">
      <Carousel.PrevTrigger :class="styles.Trigger">
        <ArrowLeftIcon />
      </Carousel.PrevTrigger>
      <Carousel.NextTrigger :class="styles.Trigger">
        <ArrowRightIcon />
      </Carousel.NextTrigger>
    </Carousel.Control>
    <Carousel.IndicatorGroup :class="styles.IndicatorGroup">
      <Carousel.Indicator v-for="(_, index) in slides" :key="index" :class="styles.Indicator" :index="index" />
    </Carousel.IndicatorGroup>
  </Carousel.Root>
</template>

```

#### Svelte

```svelte
<script>
  import { Carousel } from '@ark-ui/svelte/carousel'
  import ArrowLeftIcon from 'lucide-svelte/icons/arrow-left'
  import ArrowRightIcon from 'lucide-svelte/icons/arrow-right'
  import button from 'styles/button.module.css'
  import styles from 'styles/carousel.module.css'

  const slides = Array.from({ length: 6 })
</script>

<Carousel.Root class={styles.Root} slideCount={slides.length}>
  <Carousel.Context>
    {#snippet render(api)}
      <button class={button.Root} onclick={() => api().scrollToIndex(3)}>Go to slide 4</button>
    {/snippet}
  </Carousel.Context>
  <Carousel.ItemGroup class={styles.ItemGroup}>
    {#each slides as _, index}
      <Carousel.Item class={styles.Item} {index}>
        <div class={styles.Slide}>Slide {index + 1}</div>
      </Carousel.Item>
    {/each}
  </Carousel.ItemGroup>
  <Carousel.Control class={styles.Control}>
    <Carousel.PrevTrigger class={styles.Trigger}>
      <ArrowLeftIcon />
    </Carousel.PrevTrigger>
    <Carousel.NextTrigger class={styles.Trigger}>
      <ArrowRightIcon />
    </Carousel.NextTrigger>
  </Carousel.Control>
  <Carousel.IndicatorGroup class={styles.IndicatorGroup}>
    {#each slides as _, index}
      <Carousel.Indicator class={styles.Indicator} {index} />
    {/each}
  </Carousel.IndicatorGroup>
</Carousel.Root>

```

### Slides Per Page

Display multiple slides simultaneously by setting the `slidesPerPage` prop on `Carousel.Root`. Use `api.pageSnapPoints`
from `Carousel.Context` to render the correct number of indicators based on pages rather than individual slides. Add the
`spacing` prop to control the gap between slides.

**Example: slides-per-page**

#### React

```tsx
import { Carousel } from '@ark-ui/react/carousel'
import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react'
import styles from 'styles/carousel.module.css'

export const SlidesPerPage = () => {
  const slides = Array.from({ length: 6 })

  return (
    <Carousel.Root className={styles.Root} slideCount={slides.length} slidesPerPage={2} spacing="20px">
      <Carousel.Control className={styles.Control}>
        <Carousel.PrevTrigger className={styles.Trigger}>
          <ArrowLeftIcon />
        </Carousel.PrevTrigger>
        <Carousel.NextTrigger className={styles.Trigger}>
          <ArrowRightIcon />
        </Carousel.NextTrigger>
      </Carousel.Control>
      <Carousel.ItemGroup className={styles.ItemGroup}>
        {slides.map((_, index) => (
          <Carousel.Item className={styles.Item} key={index} index={index}>
            <div className={styles.Slide}>Slide {index + 1}</div>
          </Carousel.Item>
        ))}
      </Carousel.ItemGroup>
      <Carousel.Context>
        {(api) => (
          <Carousel.IndicatorGroup className={styles.IndicatorGroup}>
            {api.pageSnapPoints.map((_, index) => (
              <Carousel.Indicator className={styles.Indicator} key={index} index={index} />
            ))}
          </Carousel.IndicatorGroup>
        )}
      </Carousel.Context>
    </Carousel.Root>
  )
}

```

#### Solid

```tsx
import { Carousel } from '@ark-ui/solid/carousel'
import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-solid'
import { Index } from 'solid-js'
import styles from 'styles/carousel.module.css'

const slides = Array.from({ length: 6 })

export const SlidesPerPage = () => {
  return (
    <Carousel.Root class={styles.Root} slideCount={slides.length} slidesPerPage={2} spacing="20px">
      <Carousel.Control class={styles.Control}>
        <Carousel.PrevTrigger class={styles.Trigger}>
          <ArrowLeftIcon />
        </Carousel.PrevTrigger>
        <Carousel.NextTrigger class={styles.Trigger}>
          <ArrowRightIcon />
        </Carousel.NextTrigger>
      </Carousel.Control>
      <Carousel.ItemGroup class={styles.ItemGroup}>
        <Index each={slides}>
          {(_, index) => (
            <Carousel.Item class={styles.Item} index={index}>
              <div class={styles.Slide}>Slide {index + 1}</div>
            </Carousel.Item>
          )}
        </Index>
      </Carousel.ItemGroup>
      <Carousel.Context>
        {(api) => (
          <Carousel.IndicatorGroup class={styles.IndicatorGroup}>
            <Index each={api().pageSnapPoints}>
              {(_, index) => <Carousel.Indicator class={styles.Indicator} index={index} />}
            </Index>
          </Carousel.IndicatorGroup>
        )}
      </Carousel.Context>
    </Carousel.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Carousel } from '@ark-ui/vue/carousel'
import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-vue-next'
import styles from 'styles/carousel.module.css'

const slides = Array.from({ length: 6 })
</script>

<template>
  <Carousel.Root :class="styles.Root" :slide-count="slides.length" :slides-per-page="2" spacing="20px">
    <Carousel.Control :class="styles.Control">
      <Carousel.PrevTrigger :class="styles.Trigger">
        <ArrowLeftIcon />
      </Carousel.PrevTrigger>
      <Carousel.NextTrigger :class="styles.Trigger">
        <ArrowRightIcon />
      </Carousel.NextTrigger>
    </Carousel.Control>
    <Carousel.ItemGroup :class="styles.ItemGroup">
      <Carousel.Item v-for="(_, index) in slides" :key="index" :class="styles.Item" :index="index">
        <div :class="styles.Slide">Slide {{ index + 1 }}</div>
      </Carousel.Item>
    </Carousel.ItemGroup>
    <Carousel.Context v-slot="api">
      <Carousel.IndicatorGroup :class="styles.IndicatorGroup">
        <Carousel.Indicator
          v-for="(_, index) in api.pageSnapPoints"
          :key="index"
          :class="styles.Indicator"
          :index="index"
        />
      </Carousel.IndicatorGroup>
    </Carousel.Context>
  </Carousel.Root>
</template>

```

#### Svelte

```svelte
<script>
  import { Carousel } from '@ark-ui/svelte/carousel'
  import ArrowLeftIcon from 'lucide-svelte/icons/arrow-left'
  import ArrowRightIcon from 'lucide-svelte/icons/arrow-right'
  import styles from 'styles/carousel.module.css'

  const slides = Array.from({ length: 6 })
</script>

<Carousel.Root class={styles.Root} slideCount={slides.length} slidesPerPage={2} spacing="20px">
  <Carousel.Control class={styles.Control}>
    <Carousel.PrevTrigger class={styles.Trigger}>
      <ArrowLeftIcon />
    </Carousel.PrevTrigger>
    <Carousel.NextTrigger class={styles.Trigger}>
      <ArrowRightIcon />
    </Carousel.NextTrigger>
  </Carousel.Control>
  <Carousel.ItemGroup class={styles.ItemGroup}>
    {#each slides as _, index}
      <Carousel.Item class={styles.Item} {index}>
        <div class={styles.Slide}>Slide {index + 1}</div>
      </Carousel.Item>
    {/each}
  </Carousel.ItemGroup>
  <Carousel.Context>
    {#snippet render(api)}
      <Carousel.IndicatorGroup class={styles.IndicatorGroup}>
        {#each api().pageSnapPoints as _, index}
          <Carousel.Indicator class={styles.Indicator} {index} />
        {/each}
      </Carousel.IndicatorGroup>
    {/snippet}
  </Carousel.Context>
</Carousel.Root>

```

### Spacing

Control the gap between slides using the `spacing` prop on `Carousel.Root`. Combine it with `slidesPerPage` to create
layouts that show partial previews of adjacent slides.

**Example: spacing**

#### React

```tsx
import { Carousel } from '@ark-ui/react/carousel'
import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react'
import styles from 'styles/carousel.module.css'

const slides = Array.from({ length: 6 })

export const Spacing = () => {
  return (
    <Carousel.Root className={styles.Root} slideCount={slides.length} slidesPerPage={1.5} spacing="48px">
      <span className={styles.StatusText}>spacing='48px'</span>
      <Carousel.ItemGroup className={styles.ItemGroup}>
        {slides.map((_, index) => (
          <Carousel.Item className={styles.Item} key={index} index={index}>
            <div className={styles.Slide}>{index + 1}</div>
          </Carousel.Item>
        ))}
      </Carousel.ItemGroup>
      <Carousel.Control className={styles.Control}>
        <Carousel.PrevTrigger className={styles.Trigger}>
          <ArrowLeftIcon />
        </Carousel.PrevTrigger>
        <Carousel.Context>
          {(api) => (
            <Carousel.IndicatorGroup className={styles.IndicatorGroup}>
              {api.pageSnapPoints.map((_, index) => (
                <Carousel.Indicator className={styles.Indicator} key={index} index={index} />
              ))}
            </Carousel.IndicatorGroup>
          )}
        </Carousel.Context>
        <Carousel.NextTrigger className={styles.Trigger}>
          <ArrowRightIcon />
        </Carousel.NextTrigger>
      </Carousel.Control>
    </Carousel.Root>
  )
}

```

#### Solid

```tsx
import { Carousel } from '@ark-ui/solid/carousel'
import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-solid'
import { Index } from 'solid-js'
import styles from 'styles/carousel.module.css'

const slides = Array.from({ length: 6 })

export const Spacing = () => {
  return (
    <Carousel.Root class={styles.Root} slideCount={slides.length} slidesPerPage={1.5} spacing="48px">
      <span class={styles.StatusText}>spacing='48px'</span>
      <Carousel.ItemGroup class={styles.ItemGroup}>
        <Index each={slides}>
          {(_, index) => (
            <Carousel.Item class={styles.Item} index={index}>
              <div class={styles.Slide}>{index + 1}</div>
            </Carousel.Item>
          )}
        </Index>
      </Carousel.ItemGroup>
      <Carousel.Control class={styles.Control} data-align="center">
        <Carousel.PrevTrigger class={styles.Trigger}>
          <ArrowLeftIcon />
        </Carousel.PrevTrigger>
        <Carousel.Context>
          {(api) => (
            <Carousel.IndicatorGroup class={styles.IndicatorGroup}>
              <Index each={api().pageSnapPoints}>
                {(_, index) => <Carousel.Indicator class={styles.Indicator} index={index} />}
              </Index>
            </Carousel.IndicatorGroup>
          )}
        </Carousel.Context>
        <Carousel.NextTrigger class={styles.Trigger}>
          <ArrowRightIcon />
        </Carousel.NextTrigger>
      </Carousel.Control>
    </Carousel.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Carousel } from '@ark-ui/vue/carousel'
import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-vue-next'
import styles from 'styles/carousel.module.css'

const slides = Array.from({ length: 6 })
</script>

<template>
  <Carousel.Root :class="styles.Root" :slide-count="slides.length" :slides-per-page="1.5" spacing="48px">
    <span :class="styles.StatusText">spacing='48px'</span>
    <Carousel.ItemGroup :class="styles.ItemGroup">
      <Carousel.Item v-for="(_, index) in slides" :key="index" :class="styles.Item" :index="index">
        <div :class="styles.Slide">{{ index + 1 }}</div>
      </Carousel.Item>
    </Carousel.ItemGroup>
    <Carousel.Control :class="styles.Control" data-align="center">
      <Carousel.PrevTrigger :class="styles.Trigger">
        <ArrowLeftIcon />
      </Carousel.PrevTrigger>
      <Carousel.Context v-slot="api">
        <Carousel.IndicatorGroup :class="styles.IndicatorGroup">
          <Carousel.Indicator
            v-for="(_, index) in api.pageSnapPoints"
            :key="index"
            :class="styles.Indicator"
            :index="index"
          />
        </Carousel.IndicatorGroup>
      </Carousel.Context>
      <Carousel.NextTrigger :class="styles.Trigger">
        <ArrowRightIcon />
      </Carousel.NextTrigger>
    </Carousel.Control>
  </Carousel.Root>
</template>

```

#### Svelte

```svelte
<script>
  import { Carousel } from '@ark-ui/svelte/carousel'
  import ArrowLeftIcon from 'lucide-svelte/icons/arrow-left'
  import ArrowRightIcon from 'lucide-svelte/icons/arrow-right'
  import styles from 'styles/carousel.module.css'

  const slides = Array.from({ length: 6 })
</script>

<Carousel.Root class={styles.Root} slideCount={slides.length} slidesPerPage={1.5} spacing="48px">
  <span class={styles.StatusText}>spacing='48px'</span>
  <Carousel.ItemGroup class={styles.ItemGroup}>
    {#each slides as _, index}
      <Carousel.Item class={styles.Item} {index}>
        <div class={styles.Slide}>{index + 1}</div>
      </Carousel.Item>
    {/each}
  </Carousel.ItemGroup>
  <Carousel.Control class={styles.Control} data-align="center">
    <Carousel.PrevTrigger class={styles.Trigger}>
      <ArrowLeftIcon />
    </Carousel.PrevTrigger>
    <Carousel.Context>
      {#snippet render(api)}
        <Carousel.IndicatorGroup class={styles.IndicatorGroup}>
          {#each api().pageSnapPoints as _, index}
            <Carousel.Indicator class={styles.Indicator} {index} />
          {/each}
        </Carousel.IndicatorGroup>
      {/snippet}
    </Carousel.Context>
    <Carousel.NextTrigger class={styles.Trigger}>
      <ArrowRightIcon />
    </Carousel.NextTrigger>
  </Carousel.Control>
</Carousel.Root>

```

### Variable Sizes

To allow slides with different widths, set the `autoSize` prop on `Carousel.Root`. This lets each `Carousel.Item` define
its own width, and the carousel will adjust automatically. You can also use the `snapAlign` prop on individual items to
control where each one snaps into view.

**Example: variable-size**

#### React

```tsx
import { Carousel } from '@ark-ui/react/carousel'
import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-react'
import styles from 'styles/carousel.module.css'

const items = [
  { id: '1', width: '120px', label: 'Small' },
  { id: '2', width: '200px', label: 'Medium Size' },
  { id: '3', width: '80px', label: 'XS' },
  { id: '4', width: '250px', label: 'Large Content Here' },
  { id: '5', width: '150px', label: 'Regular' },
]

export const VariableSize = () => {
  return (
    <Carousel.Root className={styles.Root} slideCount={items.length} autoSize spacing="8px">
      <Carousel.Control className={styles.Control}>
        <Carousel.PrevTrigger className={styles.Trigger}>
          <ArrowLeftIcon />
        </Carousel.PrevTrigger>
        <Carousel.NextTrigger className={styles.Trigger}>
          <ArrowRightIcon />
        </Carousel.NextTrigger>
      </Carousel.Control>
      <Carousel.ItemGroup className={styles.ItemGroup}>
        {items.map((item, index) => (
          <Carousel.Item key={item.id} index={index} snapAlign="center">
            <div className={styles.Slide} style={{ width: item.width, height: '6rem' }}>
              {item.label}
            </div>
          </Carousel.Item>
        ))}
      </Carousel.ItemGroup>
      <Carousel.Context>
        {(api) => (
          <Carousel.IndicatorGroup className={styles.IndicatorGroup}>
            {api.pageSnapPoints.map((_, index) => (
              <Carousel.Indicator className={styles.Indicator} key={index} index={index} />
            ))}
          </Carousel.IndicatorGroup>
        )}
      </Carousel.Context>
    </Carousel.Root>
  )
}

```

#### Solid

```tsx
import { Carousel } from '@ark-ui/solid/carousel'
import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-solid'
import { For } from 'solid-js'
import styles from 'styles/carousel.module.css'

const items = [
  { id: '1', width: '120px', label: 'Small' },
  { id: '2', width: '200px', label: 'Medium Size' },
  { id: '3', width: '80px', label: 'XS' },
  { id: '4', width: '250px', label: 'Large Content Here' },
  { id: '5', width: '150px', label: 'Regular' },
]

export const VariableSize = () => {
  return (
    <Carousel.Root class={styles.Root} slideCount={items.length} autoSize spacing="8px">
      <Carousel.Control class={styles.Control}>
        <Carousel.PrevTrigger class={styles.Trigger}>
          <ArrowLeftIcon />
        </Carousel.PrevTrigger>
        <Carousel.NextTrigger class={styles.Trigger}>
          <ArrowRightIcon />
        </Carousel.NextTrigger>
      </Carousel.Control>
      <Carousel.ItemGroup class={styles.ItemGroup}>
        <For each={items}>
          {(item, index) => (
            <Carousel.Item index={index()} snapAlign="center">
              <div class={styles.Slide} style={{ width: item.width, height: '6rem' }}>
                {item.label}
              </div>
            </Carousel.Item>
          )}
        </For>
      </Carousel.ItemGroup>
      <Carousel.Context>
        {(api) => (
          <Carousel.IndicatorGroup class={styles.IndicatorGroup}>
            <For each={api().pageSnapPoints}>
              {(_, index) => <Carousel.Indicator class={styles.Indicator} index={index()} />}
            </For>
          </Carousel.IndicatorGroup>
        )}
      </Carousel.Context>
    </Carousel.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Carousel } from '@ark-ui/vue/carousel'
import { ArrowLeftIcon, ArrowRightIcon } from 'lucide-vue-next'
import styles from 'styles/carousel.module.css'

const items = [
  { id: '1', width: '120px', label: 'Small' },
  { id: '2', width: '200px', label: 'Medium Size' },
  { id: '3', width: '80px', label: 'XS' },
  { id: '4', width: '250px', label: 'Large Content Here' },
  { id: '5', width: '150px', label: 'Regular' },
]
</script>

<template>
  <Carousel.Root :class="styles.Root" :slide-count="items.length" :auto-size="true" spacing="8px">
    <Carousel.Control :class="styles.Control">
      <Carousel.PrevTrigger :class="styles.Trigger">
        <ArrowLeftIcon />
      </Carousel.PrevTrigger>
      <Carousel.NextTrigger :class="styles.Trigger">
        <ArrowRightIcon />
      </Carousel.NextTrigger>
    </Carousel.Control>
    <Carousel.ItemGroup :class="styles.ItemGroup">
      <Carousel.Item v-for="(item, index) in items" :key="item.id" :index="index" snap-align="center">
        <div :class="styles.Slide" :style="{ width: item.width, height: '6rem' }">
          {{ item.label }}
        </div>
      </Carousel.Item>
    </Carousel.ItemGroup>
    <Carousel.Context v-slot="api">
      <Carousel.IndicatorGroup :class="styles.IndicatorGroup">
        <Carousel.Indicator
          v-for="(_, index) in api.pageSnapPoints"
          :key="index"
          :class="styles.Indicator"
          :index="index"
        />
      </Carousel.IndicatorGroup>
    </Carousel.Context>
  </Carousel.Root>
</template>

```

#### Svelte

```svelte
<script>
  import { Carousel } from '@ark-ui/svelte/carousel'
  import ArrowLeftIcon from 'lucide-svelte/icons/arrow-left'
  import ArrowRightIcon from 'lucide-svelte/icons/arrow-right'
  import styles from 'styles/carousel.module.css'

  const items = [
    { id: '1', width: '120px', label: 'Small' },
    { id: '2', width: '200px', label: 'Medium Size' },
    { id: '3', width: '80px', label: 'XS' },
    { id: '4', width: '250px', label: 'Large Content Here' },
    { id: '5', width: '150px', label: 'Regular' },
  ]
</script>

<Carousel.Root class={styles.Root} slideCount={items.length} autoSize spacing="8px">
  <Carousel.Control class={styles.Control}>
    <Carousel.PrevTrigger class={styles.Trigger}>
      <ArrowLeftIcon />
    </Carousel.PrevTrigger>
    <Carousel.NextTrigger class={styles.Trigger}>
      <ArrowRightIcon />
    </Carousel.NextTrigger>
  </Carousel.Control>
  <Carousel.ItemGroup class={styles.ItemGroup}>
    {#each items as item, index}
      <Carousel.Item {index} snapAlign="center">
        <div class={styles.Slide} style:width={item.width} style:height="6rem">
          {item.label}
        </div>
      </Carousel.Item>
    {/each}
  </Carousel.ItemGroup>
  <Carousel.Context>
    {#snippet render(api)}
      <Carousel.IndicatorGroup class={styles.IndicatorGroup}>
        {#each api().pageSnapPoints as _, index}
          <Carousel.Indicator class={styles.Indicator} {index} />
        {/each}
      </Carousel.IndicatorGroup>
    {/snippet}
  </Carousel.Context>
</Carousel.Root>

```

## API Reference

### Props

**Component API Reference**

#### React

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `slideCount` | `number` | Yes | The total number of slides.
Useful for SSR to render the initial ating the snap points. |
| `allowMouseDrag` | `boolean` | No | Whether to allow scrolling via dragging with mouse |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `autoplay` | `boolean | { delay: number }` | No | Whether to scroll automatically. The default delay is 4000ms. |
| `defaultPage` | `number` | No | The initial page to scroll to when rendered.
Use when you don't need to control the page of the carousel. |
| `ids` | `Partial<{
  root: string
  item: (index: number) => string
  itemGroup: string
  nextTrigger: string
  prevTrigger: string
  indicatorGroup: string
  indicator: (index: number) => string
}>` | No | The ids of the elements in the carousel. Useful for composition. |
| `inViewThreshold` | `number | number[]` | No | The threshold for determining if an item is in view. |
| `loop` | `boolean` | No | Whether the carousel should loop around. |
| `onAutoplayStatusChange` | `(details: AutoplayStatusDetails) => void` | No | Function called when the autoplay status changes. |
| `onDragStatusChange` | `(details: DragStatusDetails) => void` | No | Function called when the drag status changes. |
| `onPageChange` | `(details: PageChangeDetails) => void` | No | Function called when the page changes. |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the element. |
| `padding` | `string` | No | Defines the extra space added around the scrollable area,
enabling nearby items to remain partially in view. |
| `page` | `number` | No | The controlled page of the carousel. |
| `slidesPerMove` | `number | 'auto'` | No | The number of slides to scroll at a time.

When set to `auto`, the number of slides to scroll is determined by the
`slidesPerPage` property. |
| `slidesPerPage` | `number` | No | The number of slides to show at a time. |
| `snapType` | `'proximity' | 'mandatory'` | No | The snap type of the item. |
| `spacing` | `string` | No | The amount of space between items. |
| `translations` | `IntlTranslations` | No | The localized messages to use. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | root |
| `[data-orientation]` | The orientation of the carousel |


**Root CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--slides-per-page` | The number of slides visible per page |
| `--slide-spacing` | The spacing between slides |
| `--slide-item-size` | The calculated size of each slide item |


**AutoplayIndicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `paused` | `string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>` | No | The content to render when autoplay is paused. |
| `playing` | `string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>` | No | The content to render when autoplay is playing. |


**AutoplayTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**AutoplayTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | autoplay-trigger |
| `[data-orientation]` | The orientation of the autoplaytrigger |
| `[data-pressed]` | Present when pressed |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | control |
| `[data-orientation]` | The orientation of the control |


**IndicatorGroup Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**IndicatorGroup Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | indicator-group |
| `[data-orientation]` | The orientation of the indicatorgroup |


**Indicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `index` | `number` | Yes | The index of the indicator. |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `readOnly` | `boolean` | No | Whether the indicator is read only. |


**Indicator Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | indicator |
| `[data-orientation]` | The orientation of the indicator |
| `[data-index]` | The index of the item |
| `[data-readonly]` | Present when read-only |
| `[data-current]` | Present when current |


**ItemGroup Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemGroup Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | item-group |
| `[data-orientation]` | The orientation of the item |
| `[data-dragging]` | Present when in the dragging state |


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `index` | `number` | Yes | The index of the item. |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `snapAlign` | `'center' | 'start' | 'end'` | No | The snap alignment of the item. |


**Item Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | item |
| `[data-index]` | The index of the item |
| `[data-inview]` | Present when in viewport |
| `[data-orientation]` | The orientation of the item |


**NextTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**NextTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | next-trigger |
| `[data-orientation]` | The orientation of the nexttrigger |


**PrevTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**PrevTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | prev-trigger |
| `[data-orientation]` | The orientation of the prevtrigger |


**ProgressText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseCarouselReturn` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Solid

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `slideCount` | `number` | Yes | The total number of slides.
Useful for SSR to render the initial ating the snap points. |
| `allowMouseDrag` | `boolean` | No | Whether to allow scrolling via dragging with mouse |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `autoplay` | `boolean | { delay: number }` | No | Whether to scroll automatically. The default delay is 4000ms. |
| `defaultPage` | `number` | No | The initial page to scroll to when rendered.
Use when you don't need to control the page of the carousel. |
| `ids` | `Partial<{
  root: string
  item: (index: number) => string
  itemGroup: string
  nextTrigger: string
  prevTrigger: string
  indicatorGroup: string
  indicator: (index: number) => string
}>` | No | The ids of the elements in the carousel. Useful for composition. |
| `inViewThreshold` | `number | number[]` | No | The threshold for determining if an item is in view. |
| `loop` | `boolean` | No | Whether the carousel should loop around. |
| `onAutoplayStatusChange` | `(details: AutoplayStatusDetails) => void` | No | Function called when the autoplay status changes. |
| `onDragStatusChange` | `(details: DragStatusDetails) => void` | No | Function called when the drag status changes. |
| `onPageChange` | `(details: PageChangeDetails) => void` | No | Function called when the page changes. |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the element. |
| `padding` | `string` | No | Defines the extra space added around the scrollable area,
enabling nearby items to remain partially in view. |
| `page` | `number` | No | The controlled page of the carousel. |
| `slidesPerMove` | `number | 'auto'` | No | The number of slides to scroll at a time.

When set to `auto`, the number of slides to scroll is determined by the
`slidesPerPage` property. |
| `slidesPerPage` | `number` | No | The number of slides to show at a time. |
| `snapType` | `'proximity' | 'mandatory'` | No | The snap type of the item. |
| `spacing` | `string` | No | The amount of space between items. |
| `translations` | `IntlTranslations` | No | The localized messages to use. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | root |
| `[data-orientation]` | The orientation of the carousel |


**Root CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--slides-per-page` | The number of slides visible per page |
| `--slide-spacing` | The spacing between slides |
| `--slide-item-size` | The calculated size of each slide item |


**AutoplayTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**AutoplayTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | autoplay-trigger |
| `[data-orientation]` | The orientation of the autoplaytrigger |
| `[data-pressed]` | Present when pressed |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | control |
| `[data-orientation]` | The orientation of the control |


**IndicatorGroup Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**IndicatorGroup Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | indicator-group |
| `[data-orientation]` | The orientation of the indicatorgroup |


**Indicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `index` | `number` | Yes | The index of the indicator. |
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `readOnly` | `boolean` | No | Whether the indicator is read only. |


**Indicator Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | indicator |
| `[data-orientation]` | The orientation of the indicator |
| `[data-index]` | The index of the item |
| `[data-readonly]` | Present when read-only |
| `[data-current]` | Present when current |


**ItemGroup Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemGroup Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | item-group |
| `[data-orientation]` | The orientation of the item |
| `[data-dragging]` | Present when in the dragging state |


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `index` | `number` | Yes | The index of the item. |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `snapAlign` | `'start' | 'end' | 'center'` | No | The snap alignment of the item. |


**Item Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | item |
| `[data-index]` | The index of the item |
| `[data-inview]` | Present when in viewport |
| `[data-orientation]` | The orientation of the item |


**NextTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**NextTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | next-trigger |
| `[data-orientation]` | The orientation of the nexttrigger |


**PrevTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**PrevTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | prev-trigger |
| `[data-orientation]` | The orientation of the prevtrigger |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseCarouselReturn` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Vue

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `slideCount` | `number` | Yes | The total number of slides.
Useful for SSR to render the initial ating the snap points. |
| `allowMouseDrag` | `boolean` | No | Whether to allow scrolling via dragging with mouse |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `autoplay` | `boolean | { delay: number }` | No | Whether to scroll automatically. The default delay is 4000ms. |
| `defaultPage` | `number` | No | The initial page to scroll to when rendered.
Use when you don't need to control the page of the carousel. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{
  root: string
  item(index: number): string
  itemGroup: string
  nextTrigger: string
  prevTrigger: string
  indicatorGroup: string
  indicator(index: number): string
}>` | No | The ids of the elements in the carousel. Useful for composition. |
| `inViewThreshold` | `number | number[]` | No | The threshold for determining if an item is in view. |
| `loop` | `boolean` | No | Whether the carousel should loop around. |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the element. |
| `padding` | `string` | No | Defines the extra space added around the scrollable area,
enabling nearby items to remain partially in view. |
| `page` | `number` | No | The controlled page of the carousel. |
| `slidesPerMove` | `number | 'auto'` | No | The number of slides to scroll at a time.

When set to `auto`, the number of slides to scroll is determined by the
`slidesPerPage` property. |
| `slidesPerPage` | `number` | No | The number of slides to show at a time. |
| `snapType` | `'proximity' | 'mandatory'` | No | The snap type of the item. |
| `spacing` | `string` | No | The amount of space between items. |
| `translations` | `IntlTranslations` | No | The localized messages to use. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | root |
| `[data-orientation]` | The orientation of the carousel |


**Root CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--slides-per-page` | The number of slides visible per page |
| `--slide-spacing` | The spacing between slides |
| `--slide-item-size` | The calculated size of each slide item |


**AutoplayTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**AutoplayTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | autoplay-trigger |
| `[data-orientation]` | The orientation of the autoplaytrigger |
| `[data-pressed]` | Present when pressed |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | control |
| `[data-orientation]` | The orientation of the control |


**IndicatorGroup Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**IndicatorGroup Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | indicator-group |
| `[data-orientation]` | The orientation of the indicatorgroup |


**Indicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `index` | `number` | Yes | The index of the indicator. |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `readOnly` | `boolean` | No | Whether the indicator is read only. |


**Indicator Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | indicator |
| `[data-orientation]` | The orientation of the indicator |
| `[data-index]` | The index of the item |
| `[data-readonly]` | Present when read-only |
| `[data-current]` | Present when current |


**ItemGroup Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ItemGroup Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | item-group |
| `[data-orientation]` | The orientation of the item |
| `[data-dragging]` | Present when in the dragging state |


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `index` | `number` | Yes | The index of the item. |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `snapAlign` | `'start' | 'end' | 'center'` | No | The snap alignment of the item. |


**Item Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | item |
| `[data-index]` | The index of the item |
| `[data-inview]` | Present when in viewport |
| `[data-orientation]` | The orientation of the item |


**NextTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**NextTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | next-trigger |
| `[data-orientation]` | The orientation of the nexttrigger |


**PrevTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**PrevTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | prev-trigger |
| `[data-orientation]` | The orientation of the prevtrigger |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `CarouselApi<PropTypes>` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Svelte

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `slideCount` | `number` | Yes | The total number of slides.
Useful for SSR to render the initial ating the snap points. |
| `allowMouseDrag` | `boolean` | No | Whether to allow scrolling via dragging with mouse |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `autoplay` | `boolean | { delay: number }` | No | Whether to scroll automatically. The default delay is 4000ms. |
| `defaultPage` | `number` | No | The initial page to scroll to when rendered.
Use when you don't need to control the page of the carousel. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{
  root: string
  item: (index: number) => string
  itemGroup: string
  nextTrigger: string
  prevTrigger: string
  indicatorGroup: string
  indicator: (index: number) => string
}>` | No | The ids of the elements in the carousel. Useful for composition. |
| `inViewThreshold` | `number | number[]` | No | The threshold for determining if an item is in view. |
| `loop` | `boolean` | No | Whether the carousel should loop around. |
| `onAutoplayStatusChange` | `(details: AutoplayStatusDetails) => void` | No | Function called when the autoplay status changes. |
| `onDragStatusChange` | `(details: DragStatusDetails) => void` | No | Function called when the drag status changes. |
| `onPageChange` | `(details: PageChangeDetails) => void` | No | Function called when the page changes. |
| `orientation` | `'horizontal' | 'vertical'` | No | The orientation of the element. |
| `padding` | `string` | No | Defines the extra space added around the scrollable area,
enabling nearby items to remain partially in view. |
| `page` | `number` | No | The controlled page of the carousel. |
| `ref` | `Element` | No |  |
| `slidesPerMove` | `number | 'auto'` | No | The number of slides to scroll at a time.

When set to `auto`, the number of slides to scroll is determined by the
`slidesPerPage` property. |
| `slidesPerPage` | `number` | No | The number of slides to show at a time. |
| `snapType` | `'proximity' | 'mandatory'` | No | The snap type of the item. |
| `spacing` | `string` | No | The amount of space between items. |
| `translations` | `IntlTranslations` | No | The localized messages to use. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | root |
| `[data-orientation]` | The orientation of the carousel |


**Root CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--slides-per-page` | The number of slides visible per page |
| `--slide-spacing` | The spacing between slides |
| `--slide-item-size` | The calculated size of each slide item |


**AutoplayTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**AutoplayTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | autoplay-trigger |
| `[data-orientation]` | The orientation of the autoplaytrigger |
| `[data-pressed]` | Present when pressed |


**Context Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `render` | `Snippet<[UseCarouselContext]>` | Yes |  |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Control Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | control |
| `[data-orientation]` | The orientation of the control |


**IndicatorGroup Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**IndicatorGroup Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | indicator-group |
| `[data-orientation]` | The orientation of the indicatorgroup |


**Indicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `index` | `number` | Yes | The index of the indicator. |
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `readOnly` | `boolean` | No | Whether the indicator is read only. |
| `ref` | `Element` | No |  |


**Indicator Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | indicator |
| `[data-orientation]` | The orientation of the indicator |
| `[data-index]` | The index of the item |
| `[data-readonly]` | Present when read-only |
| `[data-current]` | Present when current |


**ItemGroup Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**ItemGroup Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | item-group |
| `[data-orientation]` | The orientation of the item |
| `[data-dragging]` | Present when in the dragging state |


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `index` | `number` | Yes | The index of the item. |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |
| `snapAlign` | `'start' | 'end' | 'center'` | No | The snap alignment of the item. |


**Item Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | item |
| `[data-index]` | The index of the item |
| `[data-inview]` | Present when in viewport |
| `[data-orientation]` | The orientation of the item |


**NextTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**NextTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | next-trigger |
| `[data-orientation]` | The orientation of the nexttrigger |


**PrevTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**PrevTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | carousel |
| `[data-part]` | prev-trigger |
| `[data-orientation]` | The orientation of the prevtrigger |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseCarouselReturn` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `page` | `number` | The current index of the carousel |
| `pageSnapPoints` | `number[]` | The current snap points of the carousel |
| `isPlaying` | `boolean` | Whether the carousel is auto playing |
| `isDragging` | `boolean` | Whether the carousel is being dragged. This only works when `draggable` is true. |
| `canScrollNext` | `boolean` | Whether the carousel is can scroll to the next view |
| `canScrollPrev` | `boolean` | Whether the carousel is can scroll to the previous view |
| `scrollToIndex` | `(index: number, instant?: boolean) => void` | Function to scroll to a specific item index |
| `scrollTo` | `(page: number, instant?: boolean) => void` | Function to scroll to a specific page |
| `scrollNext` | `(instant?: boolean) => void` | Function to scroll to the next page |
| `scrollPrev` | `(instant?: boolean) => void` | Function to scroll to the previous page |
| `getProgress` | `() => number` | Returns the current scroll progress as a percentage |
| `getProgressText` | `() => string` | Returns the progress text |
| `play` | `VoidFunction` | Function to start/resume autoplay |
| `pause` | `VoidFunction` | Function to pause autoplay |
| `isInView` | `(index: number) => boolean` | Whether the item is in view |
| `refresh` | `VoidFunction` | Function to re-compute the snap points
and clamp the page |


## Accessibility

Complies with the [Carousel WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/carousel/).