Media carousel

The Showcase item's media: one image or many.

The shared media element for a Showcase item (ADR 0027 — the promotion ADR 0026 owed). Images in, and the data decides:one is a static picture, many is an Embla gallery — stage, overlaid prev/next, a live counter, and always-visible pagination dots, which are the "swipe me" tell.

Deliberately a fraction of the Gallery's weight: no thumbnail rail, no zoom, no lightbox. Browsing every photo of a home is the Gallery's job, and a carousel that grew those features would be a second one.

Visually neutral — no frame, radius or tone of its own. The Showcase item frames it (via :global), rounding and elevating the stage for every card and beat; FeatureGrid only flips its orientation for the spanning item. That is why the preview below looks unfinished on its own: it is supposed to.

Progressive enhancement and swap-safe: with no JavaScript it is a scroll-snapping strip. One composite, one tab stop, ←/→ inside it — and the dots are that tab stop (ADR 0026's amendment), not a second one.

Many images

Tone

One image

Same component, same props. No controls, no dots, no script — the data decided.

Tone

Props

packages/primitives/src/MediaCarousel.astro
PropTypeRequired
imagesMediaImage[]yes
prevLabel

Accessible names for the prev/next controls — only needed when >1 image.

string
nextLabelstring
MediaImage — referenced by a prop above
FieldTypeRequired
srcstringyes
altstringyes