Carousel
This is a carousel component support all embla carousel features.
embla-carouselNextjsTypescriptTailwindcss
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Installation
npx mixcn-ui add carousel- The command will create a
components/mixcnui/Carousel.tsxin your Nextjs App directory. - It will install the neccessary package required for this component.
Props
| Props | Type | Default Value |
|---|---|---|
| carouselOpitions | EmblaCarouselOpitions | ---- |
| orentation | horizontal | vertical | horizontal |
More Examples
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.
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Orientation
The carousel can be oriented horizontally or vertically by setting the orientation prop.
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Plugin
The carousel component supports all the embla carousel plugins, you can check the embla carousel plugins for more information.
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5