Slider

Organism

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

Preview

Slide 1

Code

<%- include('modules/ui/Slider', {
  slides: [
    "Slide 1",
    "Slide 2",
    "Slide 3",
  ],
}) %>

Preview

Auto 1

Code

<%- include('modules/ui/Slider', {
  slides:           [ /* ... */ ],
  autoPlay:         true,
  autoPlayInterval: 2000,
}) %>

Preview

Slide 1 — dots only, no loop

Code

<%- include('modules/ui/Slider', {
  slides:     [ /* ... */ ],
  showArrows: false,
  loop:       false,
}) %>

<%- include('./Slider/Slider', locals) %>

Slider

Default

Auto-play

No arrows / no loop