Axismundi · Lab module · v3.5.12
Carousel Lab Module
Material You morph slider extracted from benchmark-interactions.{css,js}
during the v3.3.2 Carousel Lab Module Extraction. This page is the
module’s isolated demo surface; it is NOT loaded by the main
styleguide. See docs/CAROUSEL-AUDIT.md,
docs/CAROUSEL-ONTOLOGY-CHECK.md, and
docs/CAROUSEL-VISUAL-QA.md for the audit + ontology
binding + QA checklist.
Theme:
Components
Carousel
Native horizontal scroll + scroll-snap. Item corner = corner-extra-large (28dp). Multi-browse default mixes large/medium/small items; hero variant features one large + small queue; uncontained bleeds past trailing edge for content-first browsing.
v0.3.5 scope: multi-browse, hero, uncontained. Center-aligned hero, multi-aspect, full-screen, item-morph animation deferred.
Multi-browse — large / medium / small mix
<div class="ax-carousel">
<div class="ax-carousel__track">
<div class="ax-carousel__item ax-carousel__item--large">
<div class="ax-carousel__item-media"><img .../></div>
<span class="ax-carousel__item-label">서울의 하루</span>
</div>
<div class="ax-carousel__item ax-carousel__item--medium">...</div>
<div class="ax-carousel__item ax-carousel__item--small">...</div>
</div>
</div>Hero — featured + queue
Uncontained — items bleed past trailing edge
No padding on trailing side — items extend off-screen. Drag/scroll to reveal.
Benchmark — Material You morph slider
Progress-driven wrapper width, image zoom, label fade, drag, keyboard, and per-view controls. Keyboard support includes ArrowLeft/ArrowRight plus Home/End. Reduced-motion users receive instant state changes.
Gallery is not automatically Carousel. Production WordPress usage needs an explicit carousel pattern/style and an accessible “Show all” path to the full item set.