Accessible carousel with 5 transition animations, auto-play, and keyboard navigation.
@akex/carouselnpm install @akex/carousel
import { Carousel } from "@akex/carousel";
const slides = [
<div>Slide 1</div>,
<div>Slide 2</div>,
<div>Slide 3</div>,
];
<Carousel items={slides} animation="slide" />
<Carousel items={slides} animation="flip" autoPlay interval={3000} />
<Carousel items={slides} animation="elastic" loop={false} />Built with TypeScript from the ground up for rock-solid DX.
Direction-aware horizontal spring slide with cubic-bezier easing. The bread-and-butter of modern carousels.
Direction-aware horizontal spring slide with cubic-bezier easing. The bread-and-butter of modern carousels.
animation="slide"Elegant opacity + subtle scale crossfade. Non-directional and refined — lets content breathe.
animation="fade"Current slide zooms out while the incoming slide zooms in. High-drama transitions for product showcases.
animation="scale"Full 3-D Y-axis rotation with perspective. Bold and cinematic — ideal for card reveals and hero sections.
animation="flip"Spring physics slide with natural overshoot. Playful and satisfying — great for onboarding flows.
animation="elastic"| Prop | Type | Default | Description |
|---|---|---|---|
| items | React.ReactNode[] | — | Array of slide content (required) |
| animation | CarouselAnimation | "slide" | "slide" | "fade" | "scale" | "flip" | "elastic" |
| autoPlay | boolean | false | Auto-advance slides |
| interval | number | 4000 | Auto-play interval in milliseconds |
| showDots | boolean | true | Show dot navigation indicators |
| showArrows | boolean | true | Show previous / next arrow buttons |
| loop | boolean | true | Loop back when reaching first or last slide |
| className | string | — | Extra Tailwind classes on the root element |