Carousel

Horizontal slide rotator built on CSS scroll-snap. Arrows, pagination dots, optional autoplay with pause-on-hover.

Your shortcut to a beautiful UI.

Composable primitives.

GSAP, batteries included.

Three frameworks, one API.

Usage

import { Carousel } from '@bwo-ui/react';

<Carousel aspectRatio="16 / 9" autoplay={4000}>
  <img src="/1.jpg" alt="Slide one" />
  <img src="/2.jpg" alt="Slide two" />
  <img src="/3.jpg" alt="Slide three" />
</Carousel>

Props

Prop	Type	Default	Description
`showArrows`	`boolean`	`true`	Toggle the prev/next arrows.
`showDots`	`boolean`	`true`	Toggle the pagination dots.
`loop`	`boolean`	`true`	Wrap around at the ends.
`autoplay`	`number`	—	Auto-advance interval in ms. Omit / 0 to disable.
`pauseOnHover`	`boolean`	`true`	Pause autoplay while the cursor is over the carousel.
`index`	`number`	—	Controlled active index (0-based).
`defaultIndex`	`number`	`0`	Uncontrolled initial index.
`onIndexChange`	`(i: number) => void`	—	Called when the active slide changes.
`aspectRatio`	`string`	—	Forwarded to the viewport (e.g. "16 / 9").

The exposed ref implements { next(), prev(), goTo(i) } for imperative control.