Carousel

Horizontal or vertical slide carousel powered by Embla Carousel. Supports autoplay, pagination dots, and custom arrow rendering.

Props

Prop	Type	Default	Description
`children`	`ReactNode[]`	—	Each child is rendered as a slide
`axis`	`'horizontal' \| 'vertical'`	`'horizontal'`	Scroll axis
`autoPlay`	`boolean`	`false`	Enable autoplay
`interval`	`number`	`3000`	Autoplay interval in milliseconds
`loop`	`boolean`	`true`	Loop back to start when reaching the end
`draggable`	`boolean`	`true`	Enable drag/swipe navigation
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Slide alignment
`gap`	`number \| string`	`0`	Gap between slides
`showDots`	`boolean`	`false`	Show pagination dots
`dotColor`	`string`	`#d1d5db`	Dot color
`activeDotColor`	`string`	`#3b82f6`	Active dot color
`dotSize`	`number`	`8`	Dot size in pixels
`dotGap`	`number`	`8`	Gap between dots in pixels
`showArrows`	`boolean`	`false`	Show prev/next arrow buttons
`renderPrevArrow`	`(onClick: () => void, enabled: boolean) => ReactNode`	—	Custom previous arrow renderer
`renderNextArrow`	`(onClick: () => void, enabled: boolean) => ReactNode`	—	Custom next arrow renderer
`onSlideChange`	`(index: number) => void`	—	Called when the active slide changes
`className`	`string`	—	Container className
`style`	`CSSProperties`	—	Container style
`slideStyle`	`CSSProperties`	—	Style applied to each slide wrapper

Ref Handle

Method	Description
`next()`	Go to the next slide
`prev()`	Go to the previous slide
`goTo(index)`	Jump to a specific slide index
`pause()`	Pause autoplay
`resume()`	Resume autoplay

Example


<Carousel autoPlay interval={4000} showDots loop>
  <img src="/slide1.jpg" alt="Slide 1" />
  <img src="/slide2.jpg" alt="Slide 2" />
  <img src="/slide3.jpg" alt="Slide 3" />
</Carousel>