Moonlit ReleaseFull-width hero slide.
StellarUI
<stellar-carousel>
Scroll-snap carousel with direct child slides, previous/next controls, pagination dots, and programmatic active slide state.
Properties
Preview
Beta GallerySecond slide.
Patch NotesDrive the active slide with buttons, dots, wheel, touch, or props.
Last CallPrevious and next disable at the ends unless looping is on.
Use direct child slides. Add data-name when you want active-name selection.
Markup
<stellar-carousel
label="Featured stories"
loop
style="--carousel-aspect-ratio: var(--aspect-ratio-widescreen); --carousel-item-gap: 1rem; max-width: 34rem;"
>
<article style="position:relative;display:grid;min-block-size:100%;color:white">
<img src="https://picsum.photos/id/11/512/288" alt="" style="inline-size:100%;block-size:100%;object-fit:cover" />
<div style="position:absolute;inset:auto 0 0 0;display:grid;gap:0.375rem;padding:1.25rem;background:linear-gradient(180deg, transparent, color-mix(in oklab, black 72%, transparent))"><strong>Moonlit Release</strong><span>Full-width hero slide.</span></div>
</article>
<article data-name="beta" style="position:relative;display:grid;min-block-size:100%;color:white">
<img src="https://picsum.photos/id/29/512/288" alt="" style="inline-size:100%;block-size:100%;object-fit:cover" />
<div style="position:absolute;inset:auto 0 0 0;display:grid;gap:0.375rem;padding:1.25rem;background:linear-gradient(180deg, transparent, color-mix(in oklab, black 72%, transparent))"><strong>Beta Gallery</strong><span>Second slide.</span></div>
</article>
<article data-name="notes" style="position:relative;display:grid;min-block-size:100%;color:white">
<img src="https://picsum.photos/id/42/512/288" alt="" style="inline-size:100%;block-size:100%;object-fit:cover" />
<div style="position:absolute;inset:auto 0 0 0;display:grid;gap:0.375rem;padding:1.25rem;background:linear-gradient(180deg, transparent, color-mix(in oklab, black 72%, transparent))"><strong>Patch Notes</strong><span>Named slide.</span></div>
</article>
</stellar-carousel>API
Complete props, events, slots, and implementation notes for the shipped carousel.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
label | string | '' | Accessible name for the carousel region. Falls back to Carousel. |
active-index | number | 0 | Programmatically selects a slide by zero-based index. |
active-name | string | '' | Selects a slide by the authored child element's data-name or name attribute. |
loop | boolean | false | Wraps previous/next controls around instead of disabling at the ends. |
without-nav | boolean | false | Hides the previous and next buttons. |
without-pagination | boolean | false | Hides the pagination dots. |
Events
| Event | Source | Notes |
|---|---|---|
item-change | host | Emitted after user-driven scrolling or control navigation settles. event.detail includes index and name. |
| native scroll events | shadow scroller | The component still uses native scrolling and scroll snap under the hood. |
Slots
| Slot | Notes |
|---|---|
| default | Use direct child elements as slides. Add optional data-name or name on a slide for active-name selection. |
Notes
- `stellar-carousel` now owns the whole interaction model while direct child elements become slides automatically.
- Use ordinary child content like `article`, `figure`, or `div`. The carousel assigns slide semantics, sizing, and scroll-snap treatment internally.
- Programmatic selection works through either `active-index` or `active-name`, and the component reflects user navigation back onto those host props.
- The scroller itself owns `aspect-ratio`, horizontal overflow, and scroll snap, while the controls row sits below it the same way this component does.
- The docs preview binds the playground's `active_index` signal to the host `activeIndex` property and listens for `item-change`, so button clicks and scrolling round-trip back into the controls.