Composite
Carousel Requires JS
Scroll-snap gallery with prev / next buttons and dot indicators. Touch- and keyboard-friendly. Built on CSS scroll snap, no janky JS animation.
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 aria-label="Featured posts">
<article slot="slide">Slide 1</article>
<article slot="slide">Slide 2</article>
</ren-carousel>Reference
API
| Attribute | Type | Default | Notes |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Scroll direction. |
loop | boolean | false | Wrap from last slide back to first. |
snap | "start" | "center" | "none" | "start" | CSS scroll-snap alignment. |
Inclusive by default
Accessibility
- Wrap in
role="region"witharia-label="…"describing the gallery. - Arrow keys move between slides; Tab moves out of the carousel entirely.
- Slides with images need real alt text — they're content, not decoration.