Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# Carousel

Slideshow component for cycling through content with navigation controls

## Example​

    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​

Slideshow component for cycling through content with navigation controls

Source: `packages/appkit-ui/src/react/ui/carousel.tsx`

### Props​

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

### Usage​

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

    <Carousel /* props */ />

## CarouselContent​

Container for carousel slides with horizontal or vertical scrolling

Source: `packages/appkit-ui/src/react/ui/carousel.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <CarouselContent /* props */ />

## CarouselItem​

Individual slide within the carousel

Source: `packages/appkit-ui/src/react/ui/carousel.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <CarouselItem /* props */ />

## CarouselNext​

Button to navigate to the next carousel slide

Source: `packages/appkit-ui/src/react/ui/carousel.tsx`

### 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​

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

    <CarouselNext /* props */ />

## CarouselPrevious​

Button to navigate to the previous carousel slide

Source: `packages/appkit-ui/src/react/ui/carousel.tsx`

### 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​

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

    <CarouselPrevious /* props */ />