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: [
    "<div class='h-40 flex items-center justify-center bg-primary text-white'>Slide 1</div>",
    "<div class='h-40 flex items-center justify-center bg-secondary text-white'>Slide 2</div>",
    "<div class='h-40 flex items-center justify-center bg-info text-white'>Slide 3</div>",
  ],
}) %>

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