HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
CarouselView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorShows one slide of several, with controls to move between them.ExperimentalSince 0.1.0LayoutUsageimport'@fusion.dev/helix/carousel'import'@fusion.dev/helix-headless/carousel'Preview
API ReferenceRoothelix-carouselShows one slide of several, with controls to move between them.
PropTypeDefaultDescriptionautoplaybooleanfalseWhether the carousel advances on its own.controls"always"|"auto"|"none"Whether the previous and next controls are shown.controlsAlign"center"|"end"|"start"Where along that side the arrows sit. See `indicatorAlign`.controlsPlacement"block-end"|"block-start"|"inline-end"|"inline-start"|"overlay"Which side of the slides the arrows sit on.defaultIndexnumber0Slide to start on, where nothing declared one.indexnumberThe slide in view, counted from zero.indicatorAlign"center"|"end"|"start"Where along that side the dots sit.indicatorPlacement"block-end"|"block-start"|"inline-end"|"inline-start"Which side of the slides the dots sit on.intervalnumber5000How long each slide is held, in milliseconds.labelstring"Carousel"Accessible name for the carousel.loopbooleanfalseWhether moving past either end wraps to the other.orientation"horizontal"|"vertical"Which way the track runs.perViewnumberHow many slides are shown across the track at once. Absent shows one.
ReadTypeDescriptionpositionsnumberHow many distinct views the track holds, which is what the indicators count.slidesHTMLElement[]The slides, in light-DOM order. Empty on the server, which has no tree.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The slides.
EventTypeDescriptionhelix-selectHelixSelectEventFired when the slide in view changes, with its index. Cancelable: refusing it takes the decision and nothing moves.
MethodTypeDescriptiongoTo(index: number) => voidMoves to a slide, wrapping only where `loop` says to.
PartDescriptioncontrolsThe row of controls.indicatorOne of them, and a way to reach that slide.indicatorsThe row of controls saying where the reader is.nextThe control that moves to the next slide.next-markThe glyph on the next control.previousThe control that moves to the previous slide.previous-markThe glyph on the previous control.rotationThe control that stops and starts rotation.rotation-markThe glyph on the play and pause control.slideThe pane one slide is shown in, and the box the track snaps to.trackThe scroller the slides sit in.
CSS PropertyDescription--carousel-bleedRoom inside the scroller so a slide's own shadow, border or focus ring is not clipped by it. Defaults to enough for `--helix-shadow-md`, which reaches 16px below the box it is on; a slide on `--helix-shadow-lg` reaches 44px and wants more.--carousel-block-sizeHeight of a vertical track.--carousel-gapSpace between slides.
Roothelix-headless-carouselShows one slide of several, with controls to move between them.
PropTypeDefaultDescriptionautoplaybooleanfalseWhether the carousel advances on its own.controls"always"|"auto"|"none"Whether the previous and next controls are shown.defaultIndexnumber0Slide to start on, where nothing declared one.indexnumberThe slide in view, counted from zero.intervalnumber5000How long each slide is held, in milliseconds.labelstring"Carousel"Accessible name for the carousel.loopbooleanfalseWhether moving past either end wraps to the other.orientation"horizontal"|"vertical"Which way the track runs.perViewnumberHow many slides are shown across the track at once. Absent shows one.
ReadTypeDescriptionpositionsnumberHow many distinct views the track holds, which is what the indicators count.slidesHTMLElement[]The slides, in light-DOM order. Empty on the server, which has no tree.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The slides.
EventTypeDescriptionhelix-selectHelixSelectEventFired when the slide in view changes, with its index. Cancelable: refusing it takes the decision and nothing moves.
MethodTypeDescriptiongoTo(index: number) => voidMoves to a slide, wrapping only where `loop` says to.
PartDescriptioncontrolsThe row of controls.indicatorOne of them, and a way to reach that slide.indicatorsThe row of controls saying where the reader is.nextThe control that moves to the next slide.next-markThe glyph on the next control.previousThe control that moves to the previous slide.previous-markThe glyph on the previous control.rotationThe control that stops and starts rotation.rotation-markThe glyph on the play and pause control.slideThe pane one slide is shown in, and the box the track snaps to.trackThe scroller the slides sit in.
ExamplesNameDescriptionControlledA carousel the page owns, so the slide it shows can be driven from elsewhere.EventsThe slide in view, announced as it changes and not as it is dragged.HeroFull-bleed slides with the controls over the picture.Indicator PlacementThe indicators moved to each of the places they can sit.Placement AlignControls and indicators aligned to the start, center and end.PreviewSlides with controls and indicators, one at a time.PreviewSlides with controls and indicators, one at a time.RotatingAdvancing on its own, and stopping when a pointer rests on it.Several AcrossMore than one slide in view, which is what a shelf of cards wants.VerticalSlides stacked and scrolled downward.