Carousel
This is a carousel component support all embla carousel features.
Installation
Run the following command
pnpm dlx @shadext/cli add carousel
API Reference
Props
| prop | type | default value |
|---|---|---|
carouselOptions | EmblaCarouselOptions | -- |
orientation | "horizontal"| "vertical" | horizontal |
Accessibility
The carousel is accessible by default. Where it follows the WAI-ARIA guidelines , also it fully supports keyboard navigation.
Keyboard Navigation
| key | description |
|---|---|
ArrowRight/ArrowDown | Move to the next slide |
ArrowLeft/ArrowUp | Move to the previous slide |
Usage
The carousel component is a wrapper around the embla-carousel library. It provides a simple API to create a carousel with a few lines of code.
import {
Carousel,
CarouselMainContainer,
CarouselThumbsContainer,
SliderMainItem,
SliderThumbItem,
} from "@/components/extension/carousel";<Carousel
carouselOptions={
/*Check embla carousel for this options*/
}
orientation="vertical"
>
<CarouselMainContainer className="h-60">
<SliderMainItem> slide 1 </SliderMainItem>
<SliderMainItem> slide 2 </SliderMainItem>
<SliderMainItem> ... </SliderMainItem>
</CarouselMainContainer>
<CarouselThumbsContainer className="h-60">
<SliderThumbItem index={1}> slide 1 </SliderThumbItem>
<SliderThumbItem index={2}> slide 2 </SliderThumbItem>
<SliderThumbItem index={...}> ... </SliderThumbItem>
</CarouselThumbsContainer>
</Carousel>Example
This examples will showcase the use of the carousel component in more advanced use cases, since the simpler use cases are already covered in shadcn doc carousel component.
Indicator
It is used to show the current slide index and the total number of slides.
Orientation
The carousel can be oriented horizontally or vertically by setting the orientation prop.
For the vertical orientation, you can check the demo above.
Plugins
The carousel component supports all the embla carousel plugins, you can check the embla carousel plugins for more information.