Docs/Carousel

Carousel

Slide carousel with navigation buttons and autoplay. Sub-components for flexible layouts.

Usage

tsx

1import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from '@storm-ds/ui'
2
3<Carousel>
4  <CarouselContent>
5    <CarouselItem>Slide 1</CarouselItem>
6    <CarouselItem>Slide 2</CarouselItem>
7  </CarouselContent>
8  <CarouselPrevious />
9  <CarouselNext />
10</Carousel>

Basic

tsx

1<Carousel>
2  <CarouselContent>
3    <CarouselItem>1</CarouselItem>
4    <CarouselItem>2</CarouselItem>
5    <CarouselItem>3</CarouselItem>
6  </CarouselContent>
7  <CarouselPrevious />
8  <CarouselNext />
9</Carousel>

With Autoplay

Primary

Secondary

Accent

Muted

tsx

1<Carousel autoplay loop>
2  <CarouselContent>
3    <CarouselItem>Slide 1</CarouselItem>
4    <CarouselItem>Slide 2</CarouselItem>
5  </CarouselContent>
6  <CarouselPrevious />
7  <CarouselNext />
8</Carousel>

Image Gallery

🖼️Mountain View

🖼️Ocean Sunset

🖼️Desert Sand

🖼️Forest Trail

Vertical

Slide 1

Slide 2

Slide 3

Slide 4

tsx

1<Carousel orientation="vertical">
2  <CarouselContent>
3    <CarouselItem>Item 1</CarouselItem>
4    <CarouselItem>Item 2</CarouselItem>
5  </CarouselContent>
6</Carousel>

Props

Prop	Type	Default	Description
orientation	'horizontal' \| 'vertical'	'horizontal'	Slide direction
loop	boolean	false	Loop back to start at end
autoplay	boolean	false	Automatically rotate slides
autoplayInterval	number	3000	Milliseconds between slides
className	string	-	Custom classes

Use with AI

Create a Next.js component using Storm UI's Carousel for image/content galleries. Import: `import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from '@storm-ds/ui'`. Mark with 'use client'. Props: orientation ('horizontal'/'vertical'), loop (boolean), autoplay (boolean), autoplayInterval (number in ms), className. Sub-components: Carousel (wrapper), CarouselContent (slides container), CarouselItem (individual slide), CarouselPrevious (left/up button), CarouselNext (right/down button). Use for image galleries, testimonials, product showcases. Supports touch gestures. Loop repeats slides. Autoplay cycles automatically. Example: `<Carousel><CarouselContent><CarouselItem>Image 1</CarouselItem><CarouselItem>Image 2</CarouselItem></CarouselContent><CarouselPrevious /><CarouselNext /></Carousel>`, `<Carousel autoplay loop><CarouselContent>...</CarouselContent></Carousel>`

Command

Card