Carousel
Carousel is a native web component that arranges the slides passed as children into a horizontal track with scroll-snap. It includes next/previous buttons, clickable dot indicators, and keyboard navigation (left/right arrows). Use it to showcase images, testimonials, or cards in a compact space, optionally showing more than one slide at a time with per-view.
Preview
<pura-carousel label="Highlights" loop style="max-width: 420px">
<div style="display:grid;place-items:center;height:200px;background:var(--pura-subtle);border-radius:8px;font-size:1.25rem">
Beach at sunrise
</div>
<div style="display:grid;place-items:center;height:200px;background:var(--pura-subtle);border-radius:8px;font-size:1.25rem">
Mountain trail
</div>
<div style="display:grid;place-items:center;height:200px;background:var(--pura-subtle);border-radius:8px;font-size:1.25rem">
City at night
</div>
</pura-carousel>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
loop | boolean | false | Allows wrapping from the last slide to the first and vice versa. |
hide-dots | boolean | false | Hides the row of dot indicators. |
hide-controls | boolean | false | Hides the next/previous arrow buttons. |
per-view | number | 1 | Number of slides visible at the same time (sets the width of each slide). |
label | string | "Carousel" | Accessible label (aria-label) for the carousel region. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/carousel.js"></script>import "./pura/lib/carousel.js";