Carousel

Slideshow component for cycling through content with navigation controls

Example

carousel

Loading preview…

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