Carousel — RenDS Components

About

Overview

Use Carousel for image galleries, hero slideshows, "more like this" rows. The scroll-snap underpinning means it feels native on touch and keyboard.

Don't auto-rotate carousels. Auto-rotation is one of the most-criticized patterns on the web. If a slide must auto-advance, give the user a clear pause / play and pause on hover and focus.

Live

Demo

1

2

3

4

5

<ren-carousel class="ren-carousel" aria-label="Featured posts">
  <div class="ren-carousel-viewport">
    <div class="ren-carousel-slide">Slide 1</div>
    <div class="ren-carousel-slide">Slide 2</div>
  </div>
  <!-- arrows, dots and the counter are generated by the component -->
</ren-carousel>

Reference

API

Attribute	Type	Default	Notes
`slides-per-view`	1 \| 2 \| 3 \| 4	1	How many slides are visible. Applied as `.ren-carousel-N`; container queries drop to 2 or 1 on narrow containers.
`loop`	boolean	false	Wrap from last slide back to first. Without it the arrows disable at both ends.
`autoplay`	number (ms)	—	Interval between slides. Pauses on hover and focus, and never starts under `prefers-reduced-motion`.
`fade`	boolean	false	Cross-fade instead of scroll-snap.

Methods: next(), prev(), goTo(index), pause(), resume(). The host fires ren-slide-change with { index, total, id }.

Inclusive by default

Accessibility

Give the host an aria-label describing the gallery. The component supplies role="group" and aria-roledescription="carousel", labels each slide "N of total", and marks the visible one with aria-current="true".
Arrow keys move between slides; each slide is focusable, so Tab walks through them.
Slides with images need real alt text — they're content, not decoration.