Carousel

Installation

›pnpm dlx shadcn@latest add @evolphin/carousel

Usage

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

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

Type Definitions

import  from "embla-carousel-react";

type  = <typeof >[1];

interface CarouselProps {
  /** The orientation of the carousel */
  orientation?: "horizontal" | "vertical";     
CarouselProps.orientation?: "horizontal" | "vertical" | undefined
The orientation of the carousel
  /** Options for the Embla Carousel */
  ?: <typeof >[0];
  /** Plugins for the Embla Carousel */
  ?: <typeof >[1];
  /** Callback to get the carousel API */
  ?: (: ) => void;
}

Examples

Default

Sizes

Orientation

API Reference

Prop	Type	Default	Description
`opts`	`CarouselOptions`	-	Options for the Embla Carousel.
`plugins`	`CarouselPlugin`	-	Plugins for the Embla Carousel.
`orientation`	`"horizontal" \	"vertical"`	`"horizontal"`
`setApi`	`(api: CarouselApi) => void`	-	Callback to get the carousel API.
`className`	`string`	-	Additional CSS classes

CarouselContent

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

CarouselItem

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

CarouselPrevious

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

CarouselNext

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Search

Carousel

On this page