HyCarousel

A native-first carousel built on CSS scroll-snap. Each direct child of <hy-carousel> is treated as a slide. The component renders a Lit baseline navigation and pagination UI so it works cross-browser, and progressively enhances to ::scroll-button / ::scroll-marker pseudo-elements where supported (Chromium 135+, via @supports in the styles).

Rendering model

• Viewport is a flex scrollport with scroll-snap-type. Slides are direct children of the host, slotted into the shadow-DOM scrollport.
• Active slide tracking uses IntersectionObserver rooted on the viewport with threshold: 0.5.
• Keyboard works from the viewport (tabindex="0"): Arrow keys, Home/End, PageUp/PageDown.
• Autoplay pauses on pointer enter, focus, and hidden tabs, and is disabled entirely when prefers-reduced-motion: reduce matches.

Examples

Basic horizontal carousel

<hy-carousel navigation pagination label="Featured products">
  <article>Slide 1</article>
  <article>Slide 2</article>
  <article>Slide 3</article>
</hy-carousel>

Events

• change - Fires when the active slide changes (scroll settles past 50% threshold). Detail: { index, slide }.
• input - Fires during drag when the active slide crosses the threshold. May fire multiple times per gesture. Detail: { index, slide }.

Slots

• default - Slides — each direct child is treated as one slide.

Methods

goTo()

Scrolls to the slide at the given index.

next()

Advances to the next slide, stopping at the end.

prev()

Goes to the previous slide, stopping at the start.