Slider

Organism

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

Default

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

Auto-play

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

No arrows / no loop

Preview
Slide 1 — dots only, no loop
Code
<%- include('modules/ui/Slider', {
  slides:     [ /* ... */ ],
  showArrows: false,
  loop:       false,
}) %>
Source modules/ui/Slider.ejs