Carousel

aidsgn-carousel progressively enhances direct child elements into a native horizontal scroll area. CSS Scroll Snap handles touch, pointer, trackpad, and keyboard scrolling; the small JavaScript layer adds semantics, native Previous/Next buttons, and a current-slide status.

Design for the platformNative scrolling stays responsive across input methods.

Keep content in light DOMSemantics, inspection, and application styling remain available.

Enhance progressivelyWithout JavaScript, authored content remains visible in document order.

<aidsgn-carousel label="Featured stories">
  <article>First story</article>
  <article>Second story</article>
  <article>Third story</article>
</aidsgn-carousel>

Provide a content-specific label. Use previous-label and next-label to localize the generated button labels. The carousel shows one slide at a time by default; --aidsgn-carousel-slide-size and --aidsgn-carousel-gap can create a card rail.

There is deliberately no autoplay or infinite loop. Previous and Next disable at the collection boundaries, reduced-motion preferences remove smooth scrolling, and the focusable viewport keeps native scrolling commands available. Use a normal list or grid when users need to compare every item at once.