Carousel

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeCarouselExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeCarouselExample/></NativeScope>}

Card widths

Each item fills the track by default, so exactly one card is in view per slide. Width lives on CarouselItem rather than on the track, so overriding it gives a peek of the next card or a run of mixed widths. Positions are read back from the DOM rather than calculated from a fixed card width, so nothing needs telling when those widths change.

'use client';
import '@helios-ui/react/styles.css';
import {NativeScope,NativeCarousel,NativeCarouselItem} from '@helios-ui/react';
export function Example(){

return <NativeScope><NativeCarousel aria-label="Artwork"><NativeCarouselItem className="w-[85%]"><img src="/react/assets/board-native/carousel/kitchen.webp" alt="Cosy kitchen"/></NativeCarouselItem><NativeCarouselItem className="w-[70%]"><img src="/react/assets/board-native/carousel/seafood.webp" alt="Crab and lobster"/></NativeCarouselItem></NativeCarousel></NativeScope>;
}

Alignment and controls

align="center" rests each card in the middle of the track instead of the left edge, which suits a gallery with one hero card in view. showArrows and showDots strip the chrome back to a bare swipeable track, and gap sets the spacing in pixels.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="carousel" id="options"/>}

Accessibility

The region announces itself as a carousel and takes its name from aria-label, which is required. Each card is labelled with its position, so a screen reader reads "3 of 7" without you numbering anything. The track is focusable, so the arrow keys scroll it, and the prev/next buttons disable at the ends rather than silently doing nothing. Sliding respects prefers-reduced-motion, jumping instead of animating.