LCD
A value that changes, on grey-green liquid crystal, with a ghost of the unlit segments behind it: clocks, battery, counters.
Kit parts
Carousel
Slides seen one at a time through a viewer’s gate: transport keys either side of a frame counter on an LCD, lamp keys to jump, swipe on touch. Nothing moves on its own unless you ask it to.
Seats open in 11 days. Want one email that morning?
Anatomy
A custom element that moves its slides into a track and builds the gate and the bar around them. Under reduced motion the keys jump instead of gliding.
Variants
- Captions under pictures
- Quotes · stop key first
States
- Rest
- Hover
- Pressed
- Focus
- Disabled
Props and options
| Name | Kind | Description |
|---|---|---|
| label | attribute | Names the carousel. |
| autoplay | attribute | Advance on a timer. Adds a stop key first in the bar; hover or focus holds it; reduced motion never starts it. |
| index | attribute · property | The slide in the gate. Setting the property scrolls there. |
| go(i) | method | Bring slide i into the gate. |
| change | event | A different slide is in the gate. |
| ArrowLeft · ArrowRight | keyboard | Previous and next slide. Home and End: the first and last. |
| Swipe | touch | Scroll snapping, one slide per swipe (scroll-snap-stop). |
Usage notes
Use the keys, the lamps, a swipe, or Tab to the gate and use the arrow keys. Watch the counter.
Accessibility
- The WAI-ARIA carousel pattern.
- The gate is a polite live region while nothing rotates, so a change of slide is read out; during rotation it is silent, and focus or hover holds it.
- Keys have names (“Next slide”, “Slide 3.
Related parts
Lamp
The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words.
Icon key
A key with an icon and no words, square or round: transport, power, the small tools. Its aria-label names it; a tip shows the name.