# Carousel: Controlled

> Pass `index` and `onIndexChange`. Swiping updates your state and your state scrolls the carousel.

Example: https://hextaui.com/docs/carousel/examples/controlled
Component docs: https://hextaui.com/docs/carousel.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/carousel-controlled.json
```

This adds `components/examples/carousel/controlled.tsx` with the Carousel component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/carousel/controlled.tsx"
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Carousel,
  CarouselContent,
  CarouselDots,
  CarouselItem,
} from "@/components/ui/carousel"

const slides = [1, 2, 3, 4, 5]

export function CarouselControlled() {
  const [index, setIndex] = React.useState(2)

  return (
    <div className="flex w-full max-w-xs flex-col gap-3">
      <div className="flex flex-wrap items-center gap-2">
        {slides.map((value, position) => (
          <Button
            key={value}
            size="sm"
            variant={position === index ? "secondary" : "outline"}
            onClick={() => setIndex(position)}
          >
            {value}
          </Button>
        ))}
        <span className="text-sm text-muted-foreground">index = {index}</span>
      </div>
      <Carousel index={index} onIndexChange={setIndex} aria-label="Controlled">
        <CarouselContent>
          {slides.map((value) => (
            <CarouselItem key={value}>
              <div className="flex aspect-square items-center justify-center rounded-xl border bg-card p-6 text-4xl font-semibold">
                {value}
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <div className="mt-3 flex justify-center">
          <CarouselDots />
        </div>
      </Carousel>
    </div>
  )
}
```

## Props in this example

### Carousel

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `index` | `number` | – |  |
| `onIndexChange` | `(index: number) => void` | – |  |

## More Carousel examples

- [API](https://hextaui.com/docs/carousel/examples/api.md)
- [Several per view](https://hextaui.com/docs/carousel/examples/several-per-view.md)
- [Dots and counter](https://hextaui.com/docs/carousel/examples/dots-and-counter.md)
- [Autoplay](https://hextaui.com/docs/carousel/examples/autoplay.md)
- [Thumbnails](https://hextaui.com/docs/carousel/examples/thumbnails.md)
- [Vertical](https://hextaui.com/docs/carousel/examples/vertical.md)
- [Rewind and start index](https://hextaui.com/docs/carousel/examples/rewind.md)
- [Links and focusable content](https://hextaui.com/docs/carousel/examples/links.md)
- [Adding and removing slides](https://hextaui.com/docs/carousel/examples/dynamic.md)
- [Nested](https://hextaui.com/docs/carousel/examples/nested.md)
- [Long content and a single slide](https://hextaui.com/docs/carousel/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/carousel/examples/rtl.md)