ComponentsLumos 0.0.2NewOpen component

Slider

A row of slides that scrolls, with as many in view as you ask for.

How many slides are in view is set the way Grid sets columns — one number per size, each inheriting the one below it. So a slider that shows one slide on a phone and three on a desktop says exactly that, and nothing in between needs describing.

astro

<Slider xsmall={1.02} medium={2} large={3} label="Recent work">
  <Card heading="Northwind" … />
  <Card heading="Lantern" … />
  <Card heading="Fieldnote" … />
</Slider>

<Slider xsmall={1.02} medium={2} large={3} label="Recent work">
  <Card heading="Northwind" … />
  <Card heading="Lantern" … />
  <Card heading="Fieldnote" … />
</Slider>

The fractional default — 1.02 — is deliberate: showing a sliver of the next slide is what tells the reader there is more, without an arrow having to say so.

Props

Prop	Type	Default	What it does
`render`	`boolean`	`true`	Set to `false` to skip this component and everything inside it.
`label`	`string`	`"Slider"`	What the slides hold, for anyone who cannot see them.
`variant`	`"bleed" \| "crop-start" \| "contained"`	`"bleed"`	How far the slides run past the container. `bleed` runs off both edges of the screen, `crop-start` is flush at the start and off the end, and `contained` stays within the container on both sides.
`xsmall`	`number`	`1.02`	Slides in view below 30rem, the base every larger size falls back to. Must be greater than 0.
`small`	`number`	None	Slides in view from 30rem up. Inherits `xsmall` when unset.
`medium`	`number`	None	Slides in view from 48rem up. Inherits `small` when unset.
`large`	`number`	None	Slides in view from 64rem up. Inherits `medium` when unset.

It scrolls before it slides

Underneath it is a scroll container with scroll snapping, so a trackpad, a touchscreen and a scrollbar all work on it before any script runs. The arrows are added on top of that rather than being the only way through, which is why it still works if the JavaScript fails.