Carousel

A horizontally scrolling row of slides, built on CSS scroll-snap rather than a transform track — so touch swiping, momentum and keyboard scrolling all keep working.

src/components/ui/carousel.tsx

About

From the component's own source, where it was written.

Default label formatters, hoisted out of the parameter list.

An arrow function written inline as a default parameter is a value the React Compiler cannot safely reorder, so it bails on the whole component and none of it gets auto-memoised. At module scope it is a stable reference and the component compiles.

Install

npx astralyx-ui add carousel

Usage

import { Carousel } from '@/components/ui/carousel'

<Carousel slidesToShow={2}>
  {slides.map((s) => <Slide key={s.id} {...s} />)}
</Carousel>

Composer

Change the props and the source below follows.

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Props

slidesToShow

showDotsshowControls

tsx

<Carousel slidesToShow={2}>
  {slides}
</Carousel>

Examples

Two at a time

tsx

<Carousel slidesToShow={2}>…</Carousel>

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Carousel`

Extends Omit<ComponentProps<'div'>, 'children'>.

Prop	Type	Default	Description
children	ReactNode[]	required	One node per slide. The count drives the dots and the snap maths.
slidesToShow	number	1	How many slides fit at once. Widths are computed from this and the gap.
gap	number	12	Space between slides, in px.
showControls	boolean	true	Arrows and position dots below the track.
showDots	boolean	true	Arrows and position dots below the track.
label	string	'Carousel'	—
previousLabel	string	'Previous slide'	—
nextLabel	string	'Next slide'	—
slideLabel	(index: number, total: number) => string	DEFAULT_SLIDE_LABEL	Accessible name for a slide, given its 1-based index and the total.
dotLabel	(index: number) => string	DEFAULT_DOT_LABEL	Accessible name for a dot, given its 1-based index.