MultiCarousel
A carousel component that supports all embla carousel features.
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
Install using our CLI tool (recommended):
Terminal
1npx mixcn-ui add multicarouselImport
Component.tsx
1import { MultiCarousel } from "@components/customComponents/MultiCarousel";Props
| Name | Type | Default | Description |
|---|---|---|---|
| carouselOptions | EmblaCarouselOptions | - | Options for configuring the carousel behavior |
| orientation | horizontal | vertical | horizontal | The orientation of the carousel |
Examples
With Indicators
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
With Indicators.tsx
1import {
2 Carousel,
3 CarouselIndicator,
4 CarouselMainContainer,
5 CarouselNext,
6 CarouselPrevious,
7 CarouselThumbsContainer,
8 SliderMainItem,
9} from "@/components/uiComponents/MultiCarousel";
10
11export default function Example() {
12 return (
13 <Carousel>
14 <CarouselNext />
15 <CarouselPrevious />
16 <div className="relative">
17 <CarouselMainContainer className="h-60">
18 {Array.from({ length: 5 }).map((_, index) => (
19 <SliderMainItem key={index} className="bg-transparent">
20 <div className="outline outline-1 outline-border size-full flex items-center justify-center rounded-xl bg-background">
21 Slide {index + 1}
22 </div>
23 </SliderMainItem>
24 ))}
25 </CarouselMainContainer>
26 <div className="absolute bottom-2 left-1/2 -translate-x-1/2">
27 <CarouselThumbsContainer className="gap-x-1">
28 {Array.from({ length: 5 }).map((_, index) => (
29 <CarouselIndicator key={index} index={index} />
30 ))}
31 </CarouselThumbsContainer>
32 </div>
33 </div>
34 </Carousel>
35 );
36}With Auto-scroll Plugin
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
With Auto-scroll Plugin.tsx
1import {
2 Carousel,
3 CarouselMainContainer,
4 SliderMainItem,
5} from "@/components/uiComponents/MultiCarousel";
6import AutoScroll from "embla-carousel-auto-scroll";
7
8export default function Example() {
9 return (
10 <Carousel
11 plugins={[
12 AutoScroll({
13 playOnInit: true,
14 stopOnInteraction: false,
15 stopOnMouseEnter: true,
16 speed: 1,
17 delay: 0
18 })
19 ]}
20 carouselOptions={{
21 loop: true,
22 align: 'start',
23 containScroll: 'trimSnaps'
24 }}
25 >
26 <CarouselMainContainer className="h-60">
27 {Array.from({ length: 5 }).map((_, index) => (
28 <SliderMainItem key={index} className="bg-transparent">
29 <div className="outline outline-1 outline-border size-full flex items-center justify-center rounded-xl bg-background">
30 Slide {index + 1}
31 </div>
32 </SliderMainItem>
33 ))}
34 </CarouselMainContainer>
35 </Carousel>
36 );
37}Orientation
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Orientation.tsx
1import {
2 Carousel,
3 CarouselMainContainer,
4 CarouselNext,
5 CarouselPrevious,
6 SliderMainItem,
7 CarouselThumbsContainer,
8 SliderThumbItem,
9} from "@/components/uiComponents/MultiCarousel";
10
11export default function Example() {
12 return (
13 <Carousel>
14 <CarouselNext className="top-1/3 -translate-y-1/3" />
15 <CarouselPrevious className="top-1/3 -translate-y-1/3" />
16 <CarouselMainContainer className="h-60">
17 {Array.from({ length: 5 }).map((_, index) => (
18 <SliderMainItem key={index} className="bg-transparent">
19 <div className="outline outline-1 outline-border size-full flex items-center justify-center rounded-xl bg-background">
20 Slide {index + 1}
21 </div>
22 </SliderMainItem>
23 ))}
24 </CarouselMainContainer>
25 <CarouselThumbsContainer>
26 {Array.from({ length: 5 }).map((_, index) => (
27 <SliderThumbItem key={index} index={index} className="bg-transparent">
28 <div className="outline outline-1 outline-border size-full flex items-center justify-center rounded-xl bg-background">
29 Slide {index + 1}
30 </div>
31 </SliderThumbItem>
32 ))}
33 </CarouselThumbsContainer>
34 </Carousel>
35 );
36}