Props

Name	Type	Default	Description
gap	0 | 0.5 | 1 | 1.5 | 2 | 3 | 4	1	Space between items, as a spacing step.
hasButtons	boolean	true	Previous and next buttons when the row overflows.
hasEdgeFade	boolean	true	Fade the edges that still hide overflow.
hasLoop	boolean	false	Wrap from the last item to the first. Buttons stay available at both ends while the row overflows.
hasSnap	boolean	false	Snap each direct child to the start edge.
padding	SpacingStep	—	Inline padding inside the scrollport, with matching scroll-padding.
label	string	Carousel	Accessible name of the region. The default is localized.

Exposed

Name	Signature	Description
scrollNext	() => void	Scroll forward by about one viewport. With hasLoop, wraps to the start at the end.
scrollPrev	() => void	Scroll backward by about one viewport. With hasLoop, wraps to the end at the start.
scrollTo	(index: number) => void	Scroll the 0-based item to the start edge. The index is clamped. Only the carousel scrolls.
canScrollNext	() => boolean	Whether a forward scroll is available. With hasLoop, true whenever the content overflows.
canScrollPrev	() => boolean	Whether a backward scroll is available. With hasLoop, true whenever the content overflows.

Slots

• default: carousel items. Each top-level node is one slide. Fragments are flattened, and empty text is skipped.

Theme

The root class is astryx-carousel. The scrollport is astryx-carousel-scroller in the theme layer through .astryx-carousel__scroller.

• --astryx-carousel-gap: space between items. Set from gap.
• --astryx-carousel-padding: inline padding and scroll-padding. Set from padding.