# Carousel

Slideshow component for cycling through content with navigation controls

## Example[​](#example "Direct link to Example")

<!-- -->

```tsx
import * as React from "react"

import {
  Card,
  CardContent,
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@databricks/appkit-ui/react"

export default function CarouselExample() {
  return (
    <Carousel className="w-full max-w-xs">
      <CarouselContent>
        {Array.from({ length: 5 }).map((_, index) => (
          <CarouselItem key={index}>
            <div className="p-1">
              <Card>
                <CardContent className="flex aspect-square items-center justify-center p-6">
                  <span className="text-4xl font-semibold">{index + 1}</span>
                </CardContent>
              </Card>
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  )
}

```

## Carousel[​](#carousel-1 "Direct link to Carousel")

Slideshow component for cycling through content with navigation controls

**Source:** [`packages/appkit-ui/src/react/ui/carousel.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/carousel.tsx)

### Props[​](#props "Direct link to Props")

| Prop          | Type                                      | Required | Default      | Description |
| ------------- | ----------------------------------------- | -------- | ------------ | ----------- |
| `opts`        | `Partial<OptionsType>`                    |          | -            | -           |
| `plugins`     | `CreatePluginType<LoosePluginType, {}>[]` |          | -            | -           |
| `orientation` | `enum`                                    |          | `horizontal` | -           |
| `setApi`      | `((api: EmblaCarouselType) => void)`      |          | -            | -           |

### Usage[​](#usage "Direct link to Usage")

```tsx
import { Carousel } from '@databricks/appkit-ui';

<Carousel /* props */ />

```

## CarouselContent[​](#carouselcontent "Direct link to CarouselContent")

Container for carousel slides with horizontal or vertical scrolling

**Source:** [`packages/appkit-ui/src/react/ui/carousel.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/carousel.tsx)

### Props[​](#props-1 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-1 "Direct link to Usage")

```tsx
import { CarouselContent } from '@databricks/appkit-ui';

<CarouselContent /* props */ />

```

## CarouselItem[​](#carouselitem "Direct link to CarouselItem")

Individual slide within the carousel

**Source:** [`packages/appkit-ui/src/react/ui/carousel.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/carousel.tsx)

### Props[​](#props-2 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-2 "Direct link to Usage")

```tsx
import { CarouselItem } from '@databricks/appkit-ui';

<CarouselItem /* props */ />

```

## CarouselNext[​](#carouselnext "Direct link to CarouselNext")

Button to navigate to the next carousel slide

**Source:** [`packages/appkit-ui/src/react/ui/carousel.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/carousel.tsx)

### Props[​](#props-3 "Direct link to Props")

| Prop      | Type                                                                                  | Required | Default   | Description |
| --------- | ------------------------------------------------------------------------------------- | -------- | --------- | ----------- |
| `variant` | `"link" \| "default" \| "destructive" \| "secondary" \| "outline" \| "ghost" \| null` |          | `outline` | -           |
| `size`    | `"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg" \| null`               |          | `icon`    | -           |
| `asChild` | `boolean`                                                                             |          | -         | -           |

### Usage[​](#usage-3 "Direct link to Usage")

```tsx
import { CarouselNext } from '@databricks/appkit-ui';

<CarouselNext /* props */ />

```

## CarouselPrevious[​](#carouselprevious "Direct link to CarouselPrevious")

Button to navigate to the previous carousel slide

**Source:** [`packages/appkit-ui/src/react/ui/carousel.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/carousel.tsx)

### Props[​](#props-4 "Direct link to Props")

| Prop      | Type                                                                                  | Required | Default   | Description |
| --------- | ------------------------------------------------------------------------------------- | -------- | --------- | ----------- |
| `variant` | `"link" \| "default" \| "destructive" \| "secondary" \| "outline" \| "ghost" \| null` |          | `outline` | -           |
| `size`    | `"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg" \| null`               |          | `icon`    | -           |
| `asChild` | `boolean`                                                                             |          | -         | -           |

### Usage[​](#usage-4 "Direct link to Usage")

```tsx
import { CarouselPrevious } from '@databricks/appkit-ui';

<CarouselPrevious /* props */ />

```