Carousel
Sliding gallery of items with prev/next controls, dot indicators, looping, multi-item layout, and optional auto-play. Pure CSS transitions on a flex track — no JS animation loop, no jank.
Build a Pix flow in 12 minutes
Drop-in components for KYC, payments, and statements.
Markets-grade UI primitives
Order books, P&L, candles. Sub-frame redraw.
Fraud signals, before the fraud
Suspicious activity alerts, device trust, geo anomaly.
From component to design system
Tokens, theming, accessibility — all in.
Installation
npx ajaxui add carouselMulti-item layout
Show several slides at once with slidesPerView. Each next/prev step advances by one item, so neighbours peek through and stay legible.
Inputs Pack
From $12
Charts Pack
From $15
Animations
From $10
Finance Kit
From $24
Trading UI
From $28
Risk & Fraud
From $20
Testimonials with progress
Autoplay (6 seconds per slide) with a custom progress strip that fills in time with the autoplay tick. Looping is enabled so the strip resets cleanly.
“We shipped our Pix flow in a week. The Ajax UI primitives carried 80% of the surface — we just plugged in our API.”
Maya Hernandez
Staff Engineer · Acme Bank
“Order book and ticker components feel native — tabular numbers everywhere, no jank. Our traders noticed immediately.”
Daniel Park
Design Lead · Cosmos Trading
“The risk alert + device trust components saved us a sprint. Drop-in fraud triage UI is rare and we'd been building it from scratch.”
Lia Costa
CTO · Fintech Startup
Thumbnail navigation
Restyle <CarouselDots> with wider, squared-off bars to act as a thumbnail strip. The primitive still binds to the active index — no extra state.
Notes
Anatomy
<Carousel loop autoPlay={5000} slidesPerView={1}>
<CarouselContent>
<CarouselItem/> // one per slide
<CarouselItem/>
</CarouselContent>
<CarouselPrevious/> // floats over the left edge
<CarouselNext/> // floats over the right edge
<CarouselDots/> // floats over the bottom
</Carousel>All controls are children of <Carousel> so they share its state via context. Restyle or replace any of them — the others keep working.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| loop | boolean | false | Wrap around at the ends. |
| autoPlay | number | — | Advance interval in ms. Omit to disable. |
| slidesPerView | number | 1 | How many slides are visible at once. |
| withHandle | boolean (no — on CarouselPrevious/Next/Dots) | — | Each control is its own subcomponent — drop them where you want them positioned. |