Carousel

An interactive content slider with navigation arrows and dot indicators for cycling through items.

Preview

Featured Hostels

Zostel Manali

Himachal Pradesh

Zostel Goa

South Goa

Zostel Jaipur

Rajasthan

Zostel Rishikesh

Uttarakhand

Zostel Varanasi

Uttar Pradesh

Usage

tsx

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

<Carousel>
  <CarouselContent>
    <CarouselItem>
      <img src="/slide-1.jpg" alt="Slide 1" />
    </CarouselItem>
    <CarouselItem>
      <img src="/slide-2.jpg" alt="Slide 2" />
    </CarouselItem>
    <CarouselItem>
      <img src="/slide-3.jpg" alt="Slide 3" />
    </CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Props

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	"horizontal"	Scroll direction of the carousel
`opts`	`EmblaOptionsType`	—	Embla Carousel options for advanced configuration
`setApi`	`(api: EmblaCarouselType) => void`	—	Callback to receive the carousel API instance
`className`	`string`	—	Additional CSS classes
`children`	`ReactNode`	—	CarouselContent, CarouselPrevious, CarouselNext

orientation

Type: "horizontal" | "vertical"

Default: "horizontal"

Scroll direction of the carousel

opts

Type: EmblaOptionsType

Default: —

Embla Carousel options for advanced configuration

setApi

Type: (api: EmblaCarouselType) => void

Default: —

Callback to receive the carousel API instance

className

Type: string

Default: —

Additional CSS classes

children

Type: ReactNode

Default: —

CarouselContent, CarouselPrevious, CarouselNext

Previous Aspect Ratio Next Calendar