Carousel Extended
A carousel with motion and swipe built using Embla.
carousel
Demos
1. Vertical
2. Horizontal
3. Indicator
About
The Carousel component is built on top of Embla Carousel library.
Installation
Run the following command:
npx ever-ui-clx@0.2.1 add demo-carousel-extendedUsage
import {
Carousel,
CarouselMainContainer,
CarouselThumbsContainer,
SliderMainItem,
SliderThumbItem,
} from "@/components/ui/carousel-extended";<Carousel
carouselOptions={
// See embla-carousel docs
}
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>