BetaPublic beta — Read the release notes
Solidiom
Get Started
Documentation

Carousel

Horizontal slide-based content viewer.

Package
@solidiom/carousel
Version
0.0.1-next.0
Status
stable

Generated from the package's public source.

API

CarouselContextValueinterface

Context shape shared among all carousel parts.

Props

canScrollNext
Accessor<boolean> — Whether scrolling to next is possible.
canScrollPrev
Accessor<boolean> — Whether scrolling to previous is possible.
geometry
CarouselGeometry — The geometry configuration.
goTo
(index: number) => void — Navigate to a specific slide index.
loop
boolean — Whether loop mode is enabled.
next
() => void — Navigate to next slide.
paused
Accessor<boolean> — Whether the carousel is paused (autoplay).
physics
CarouselPhysicsPort — The physics port.
prev
() => void — Navigate to previous slide.
selectedIndex
Accessor<number> — Currently selected slide index.
setPaused
(paused: boolean) => void — Set paused state.

View source

CarouselGeometryinterface

Geometry descriptor for the carousel layout.

Props

containerWidth
number
gap
number
slideCount
number
slideWidth
number

View source

CarouselNextButtonPropsinterface

Props for the Carousel NextButton.

children: Element

View source

CarouselPhysicsPortinterface

Port interface for carousel physics/snap computation.

View source

CarouselPhysicsResultinterface

Result from physics computation.

Props

canScrollNext
boolean
canScrollPrev
boolean
scrollPosition
number
selectedIndex
number
snapPoints
number[]

View source

CarouselPrevButtonPropsinterface

Props for the Carousel PrevButton.

children: Element

View source

CarouselRootPropsinterface

Props for the Carousel Root component.

Props

autoPlay?
number — Auto-play interval in ms. 0 or undefined disables.
class?
string — CSS class.
defaultIndex?
number — Default index for uncontrolled mode.
geometry
CarouselGeometry — Geometry of the carousel layout.
loop?
boolean — Enable looping. Defaults to false.
onIndexChange?
(index: number) => void — Callback when selected index changes.
physics?
CarouselPhysicsPort — Physics port. Defaults to simpleSnapPhysics.
selectedIndex?
Accessor<number | undefined> — Controlled selected index.

children: Element

View source

CarouselSlidePropsinterface

Props for the Carousel Slide component.

Props

index
number — Index of this slide.

children: Element

View source

CarouselViewportPropsinterface

Props for the Carousel Viewport (scroll container).

children: Element

View source

NextButtoncomponent

@solidiom/carousel — Headless carousel primitive. Parts: Root, Viewport, Slide, PrevButton, NextButton. Supports scroll-snap, pointer drag-to-swipe, keyboard nav, loop mode, auto-play.

                        NextButton(props: CarouselNextButtonProps): Element

children: Element

View source

PrevButtoncomponent

@solidiom/carousel — Headless carousel primitive. Parts: Root, Viewport, Slide, PrevButton, NextButton. Supports scroll-snap, pointer drag-to-swipe, keyboard nav, loop mode, auto-play.

                        PrevButton(props: CarouselPrevButtonProps): Element

children: Element

View source

Rootcomponent

@solidiom/carousel — Headless carousel primitive. Parts: Root, Viewport, Slide, PrevButton, NextButton. Supports scroll-snap, pointer drag-to-swipe, keyboard nav, loop mode, auto-play.

                        Root(props: CarouselRootProps): Element

Props

autoPlay?
number — Auto-play interval in ms. 0 or undefined disables.
class?
string — CSS class.
defaultIndex?
number — Default index for uncontrolled mode.
geometry
CarouselGeometry — Geometry of the carousel layout.
loop?
boolean — Enable looping. Defaults to false.
onIndexChange?
(index: number) => void — Callback when selected index changes.
physics?
CarouselPhysicsPort — Physics port. Defaults to simpleSnapPhysics.
selectedIndex?
Accessor<number | undefined> — Controlled selected index.

children: Element

View source

simpleSnapPhysicsvariable

Default snap physics — no spring/momentum, just index * (slideWidth + gap).

View source

Slidecomponent

@solidiom/carousel — Headless carousel primitive. Parts: Root, Viewport, Slide, PrevButton, NextButton. Supports scroll-snap, pointer drag-to-swipe, keyboard nav, loop mode, auto-play.

                        Slide(props: CarouselSlideProps): Element

Props

index
number — Index of this slide.

children: Element

View source

useCarouselContextcontext

                        useCarouselContext(): CarouselContextValue

View source

Viewportcomponent

@solidiom/carousel — Headless carousel primitive. Parts: Root, Viewport, Slide, PrevButton, NextButton. Supports scroll-snap, pointer drag-to-swipe, keyboard nav, loop mode, auto-play.

                        Viewport(props: CarouselViewportProps): Element

children: Element

View source