Carousel

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

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

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

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

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

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 */ />