Slider

Molecule

Accessible carousel. Includes role="region" + aria-roledescription="carousel" and per-slide aria labels. Supports autoplay, arrow keys, and dot navigation.

Preview

Slide 1

Code

<Slider
  slides={[
    <HeroSlide title="Slide 1" />,
    <HeroSlide title="Slide 2" />,
    <HeroSlide title="Slide 3" />,
  ]}
/>

Preview

Auto A

Code

<Slider slides={slides} autoPlay autoPlayInterval={2000} />

Preview

Swipe me

Code

<Slider
  slides={slides}
  loop={false}
  dragThreshold={50}
  // Drag past 50 px = 1 slide.
  // Flick > 0.5 px/ms = +1 extra slide per 0.5 px/ms of release velocity.
  // Edge resistance (×0.4) keeps you on the rails when loop is off.
/>

Preview

Slide 1 — dots only, no loop

Code

<Slider slides={slides} showArrows={false} loop={false} />

Slider

Default

Auto-play

Touch swipe + momentum

No arrows / no loop