Layout Carousel

Carousel

Swipe through, one at a time — or use the arrows and the arrow keys.

Preview

Five places, five landscapes

Zostel Manali

Walk the deodar woods to Hadimba. Then go higher.

Zostel Goa

A beach shack, a sunset, a sea breeze. Stay one more day.

Zostel Jaipur

Count the Hawa Mahal's windows. Lose count. Hit the bazaar.

Zostel Munnar

Hills wrapped in tea. Walk the rows. Sip it where it grows.

Zostel Jaisalmer

Walk inside a living fort. Sleep under desert stars.

Usage

tsx

import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "zostel-ui";

<Carousel>
  <CarouselContent>
    <CarouselItem>…</CarouselItem>
    <CarouselItem>…</CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Carousel

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Which way it moves; arrow keys and swipes follow.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

orientation

Type: "horizontal" | "vertical"

Default: "horizontal"

Which way it moves; arrow keys and swipes follow.

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).

Parts

Prop	Type	Default	Description
`CarouselContent`	`div`	—	The track: swipeable, snapping, scrollbar hidden.
`CarouselItem`	`div`	—	One slide (full width; set basis-1/2 etc. for more per view).
`CarouselPrevious / CarouselNext`	`Button`	—	Round arrows over the edges; disabled at the ends.

CarouselContent

Type: div

Default: —

The track: swipeable, snapping, scrollbar hidden.

CarouselItem

Type: div

Default: —

One slide (full width; set basis-1/2 etc. for more per view).

CarouselPrevious / CarouselNext

Type: Button

Default: —

Round arrows over the edges; disabled at the ends.

Motion

A tap on an arrow slides one page smoothly — or instantly for people who ask their device for reduced motion.