slider
A slider an editor places by naming its type — Swiper underneath, a scroll-snap strip without it.
Every slider below is the same markup with a different
data-slider-type. Drag them, press the arrows, use
the bullets — and Tab into one and press ← / →
to see the keyboard control, which is on by default and belongs to
whichever slider the focus is in.
The default type: one slide at a time
No data-slider-type at all, which is what an editor
gets without choosing. Previous/next and one bullet per slide, all
three injected by the module.
-
A river in a canyon
The first slide. Its box comes from the container, not from the component.
-
A mountain range
The second slide.
-
A lake below the trees
The third and last slide — press “next” here and it rewinds to the first.
hero: cross-faded, rotating, controls over the image
Rotates every six seconds and stops the moment you rest the
pointer on it or Tab into it — the two
cheap halves of WCAG 2.2.2. The third is the stop/start control at
the left of the bar, whose name changes rather than
carrying aria-pressed: for a transport control the
useful announcement is what pressing does next.
class="m-slider--overlay" lays the bar over the
image's bottom edge. If your system is set to reduce
motion, this one starts stopped and the slide change is
instant.
gallery: one, two or three per view
One slide per view on a phone, two from the small
breakpoint and three from large —
resize the window. The preset states those two
steps by NAME, not in pixels, so it reads its numbers from the same
_breakpoints.scss the stylesheets do. The distance
between slides is --slider-gap, one declaration that
feeds both the no-script strip and Swiper's
spaceBetween.
showcase, retuned
slidesPerView: "auto" means “ask the slide”, and
--slider-slide-size is where the slide answers from —
so the next one peeks in at the trailing edge to say there is more,
with or without the script. The controls are round,
in the accent tone and pushed to the end of the row: six custom
properties on the root, no rule reaching into the component.
-
One
-
Two
-
Three
-
Four
One slide, and an unknown type
Two things that must not break. The first slider holds a single slide: no controls, no instance, no ready attribute — the markup is already exactly what it should look like, and an editor who filled a slider with one thing has not made a mistake. The second names a type that does not exist: the module reports it in the console and falls back to the default preset, because an editor's typo must not cost the slider.
-
On its own
Nothing to slide, so nothing was built.
-
Still a slider
The console says which types there are.
-
And it works
The default preset took over.