Carousel
Data DisplayA carousel with motion and swipe built using Embla.
Import
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";Usage
Interactive Product Carousel
A responsive carousel that shows 3 items on desktop, 2 on tablet, and 1 on mobile. Swipe or use navigation buttons to browse products.
S
Sonance VP66In-WallS
Sonance C6RIn-CeilingM
Mariner 86OutdoorJ
James B10SubwooferI
IPORT ConnectControlAPI Reference
opts—CarouselOptionsOptions for the carousel
plugins—CarouselPluginPlugins for the carousel
orientation"horizontal""horizontal" | "vertical"The orientation of the carousel
setApi—(api: CarouselApi) => voidCallback to get the carousel API
| Prop | Type | Default | Description |
|---|---|---|---|
opts | CarouselOptions | — | Options for the carousel |
plugins | CarouselPlugin | — | Plugins for the carousel |
orientation | "horizontal" | "vertical" | "horizontal" | The orientation of the carousel |
setApi | (api: CarouselApi) => void | — | Callback to get the carousel API |