Carousel

display

Touch-friendly carousel with navigation arrows, dot indicators, and auto-play.

Preview

No preview available

Check the code examples below.

Installation

npm install @launchapp/design-system
Import
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@launchapp/design-system";

Examples

Basic carousel

<Carousel>  <CarouselContent>    <CarouselItem><div className="p-4 bg-muted rounded-xl h-48 flex items-center justify-center">Slide 1</div></CarouselItem>    <CarouselItem><div className="p-4 bg-muted rounded-xl h-48 flex items-center justify-center">Slide 2</div></CarouselItem>    <CarouselItem><div className="p-4 bg-muted rounded-xl h-48 flex items-center justify-center">Slide 3</div></CarouselItem>  </CarouselContent>  <CarouselPrevious />  <CarouselNext /></Carousel>

Props

PropTypeDefaultDescription
opts
EmblaOptionsType—Embla carousel options.
orientation
"horizontal" | "vertical""horizontal"Scroll direction.
← PreviousBento Grid
Next →Changelog