Carousel

Installation#

pnpmbunnpmyarn
pnpm dlx shadcn@latest add @shark/carousel

Anatomy#

Carousel
├── CarouselContent
│   └── CarouselItem
├── CarouselControl
│   ├── CarouselPrevious
│   └── CarouselNext
└── CarouselIndicatorGroup
    └── CarouselIndicator

Usage#

import { 
  Carousel,
  CarouselControl,
  CarouselItem,
  CarouselContent,
  CarouselIndicator,
  CarouselIndicatorGroup,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"; 

<Carousel>
  <CarouselControl>
    <CarouselPrevious>Previous</CarouselPrevious>
    <CarouselNext>Next</CarouselNext>
  </CarouselControl>
  <CarouselContent>
    <CarouselItem />
    <CarouselItem />
  </CarouselContent>
</Carousel>

Orientation#

Horizontal#

PreviewCode

Vertical#

PreviewCode

Thumbnail Indicators#

Render each thumbnail inside CarouselIndicator to create a visual preview of each slide.

Horizontal#

PreviewCode

Vertical#

PreviewCode

Examples#

Autoplay#

Use autoplay props on Carousel to make the carousel play automatically.

Loop#

Use loop prop to make the carousel loop.

Controlled#

Use page and onPageChange props to control the carousel state programmatically.

Slides Per Page#

Display multiple slides simultaneously by setting the slidesPerPage prop on Carousel.

Spacing#

Control the gap between slides using the spacing prop on Carousel.

Mouse Drag#

To allow mouse drag, set the allowMouseDrag prop on Carousel.

API Reference#

Carousel#

Root component. Manages slide state and navigation.

CarouselContent#

Wraps all slides. Handles layout and transitions.

CarouselItem#

Wraps a single slide.

CarouselControl#

Holds prev/next navigation buttons.

CarouselPrevious#

Goes to the previous slide.

CarouselNext#

Goes to the next slide.

CarouselIndicatorGroup#

Holds slide indicator dots or pills.

CarouselIndicator#

Indicator for a slide. Click to jump to that slide.

For a complete list of props, see the Ark UI documentation.