Carousel
new 3.1 kB<hk-carousel>The whole track moves on a single transform rather than each slide animating itself, so it stays on the compositor however many slides there are. Autoplay is the part carousels usually get wrong: it suspends on hover, on focus anywhere inside, and mid-drag, and it never starts at all under prefers-reduced-motion — the user has already told the OS how they feel about things that move on their own.
#slider#gallery#swipe
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| index | number | 0 | Active slide. Two-way bindable. |
| autoplay | boolean | false | Advance on a timer. Suspended by hover, focus and drag, and ignored under reduced motion. |
| interval | number | 4000 | Milliseconds between advances. Floors at 600 so a bound value cannot spin the track. |
| loop | boolean | true | Wrap past the ends. When false, the arrows disable at the edges instead. |
| swipe | boolean | true | Pointer dragging. The threshold is a tenth of the track, so reading with a shaky hand is not a swipe. |
| showArrows | boolean | true | Previous / next controls. |
| showDots | boolean | true | The position indicator, which doubles as direct navigation. |
Outputs
changedEventEmitter<number>Emits the new index.
Methods
next() / prev()() => voidAdvance or retreat, honouring loop.
go(index)(index: number) => voidJump to a slide, clamped or wrapped by loop.
Keyboard
- ← / → Previous / next slide
- Home / End First / last slide
- Tab Into the dots, which are direct navigation
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-carousel-ease | cubic-bezier(.22,1,.36,1) | Track easing. |
| --hk-carousel-duration | 420ms | Slide duration. Forced to 0 under reduced motion. |
| --hk-carousel-arrow-bg | rgb(255 255 255 / .9) | Arrow button fill. |
Accessibility
- role="region" with aria-roledescription="carousel"; each slide is a labelled group reading "n of m".
- Off-screen slides are inert, so their links are not silently tabbable.
- Autoplay stops on focus-in and stays stopped while focus is anywhere inside — otherwise the thing being read moves out from under the reader.
- The position is announced in a polite live region, never assertive: a slide changing is not an alert.