Carousel

Access carousel context (scroll state, API, orientation).

Default

Usage

import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from '@tryvienna/ui'

<div className="w-full max-w-xs">
  <Carousel>
    <CarouselContent>
      {Array.from({ length: 5 }).map((_, index) => (
        <CarouselItem key={index}>
          <Card>
            <CardContent className="flex aspect-square items-center justify-center p-6">
              <span className="text-4xl font-semibold">{index + 1}</span>
            </CardContent>
          </Card>
        </CarouselItem>
      ))}
    </CarouselContent>
    <CarouselPrevious />
    <CarouselNext />
  </Carousel>
</div>

Examples

Default

Default

<div className="w-full max-w-xs">
  <Carousel>
    <CarouselContent>
      {Array.from({ length: 5 }).map((_, index) => (
        <CarouselItem key={index}>
          <Card>
            <CardContent className="flex aspect-square items-center justify-center p-6">
              <span className="text-4xl font-semibold">{index + 1}</span>
            </CardContent>
          </Card>
        </CarouselItem>
      ))}
    </CarouselContent>
    <CarouselPrevious />
    <CarouselNext />
  </Carousel>
</div>

Vertical

Vertical

<div className="w-full max-w-xs">
  <Carousel orientation="vertical" className="mt-12 mb-12">
    <CarouselContent className="-mt-4 h-[200px]">
      {Array.from({ length: 5 }).map((_, index) => (
        <CarouselItem key={index} className="pt-4 basis-full">
          <Card>
            <CardContent className="flex aspect-square items-center justify-center p-6">
              <span className="text-4xl font-semibold">{index + 1}</span>
            </CardContent>
          </Card>
        </CarouselItem>
      ))}
    </CarouselContent>
    <CarouselPrevious />
    <CarouselNext />
  </Carousel>
</div>

Loop

Loop

<div className="w-full max-w-xs">
  <Carousel opts={{ loop: true }}>
    <CarouselContent>
      {Array.from({ length: 5 }).map((_, index) => (
        <CarouselItem key={index}>
          <Card>
            <CardContent className="flex aspect-square items-center justify-center p-6">
              <span className="text-4xl font-semibold">{index + 1}</span>
            </CardContent>
          </Card>
        </CarouselItem>
      ))}
    </CarouselContent>
    <CarouselPrevious />
    <CarouselNext />
  </Carousel>
</div>

API Reference

Carousel

Prop	Type	Default	Description
orientation	"horizontal" | "vertical"	horizontal
opts	Partial<OptionsType> | undefined	-
setApi	((api: EmblaCarouselType | undefined) => void) | undefined	-
plugins	CreatePluginType<LoosePluginType, {}>[] | undefined	-

Also accepts all props from div.

CarouselContent

CarouselContent — Scrollable viewport container for carousel slides.

Also accepts all props from div.

CarouselItem

CarouselItem — Individual slide within CarouselContent.

Also accepts all props from div.

CarouselPrevious

CarouselPrevious — Previous slide navigation button. Absolutely positioned.

Prop	Type	Default	Description
variant	"link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null	outline
size	"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null	icon

Also accepts all props from Button.

CarouselNext

CarouselNext — Next slide navigation button. Absolutely positioned.

Prop	Type	Default	Description
variant	"link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null	outline
size	"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null	icon

Also accepts all props from Button.

Data Attributes

Component	data-slot
Carousel	"carousel"
CarouselContent	"carousel-content"
CarouselItem	"carousel-item"
CarouselPrevious	"carousel-previous"
CarouselNext	"carousel-next"