Hover or tab in
The timer waits while the mouse is over a hero, while keyboard focus is inside it and while the tab is hidden.
Full-screen hero
Three photos, a slow zoom in.
Feature
A hero can cycle through up to twelve photos. Pick a transition, a pace and which controls to show. The first photo is in the page’s HTML, the rest load when they are about to show, and a single photo stays a plain still.
The timer waits while the mouse is over a hero, while keyboard focus is inside it and while the tab is hidden.
The last hero on the page has a pause button, which is how a page meets WCAG 2.2.2. Press it, then Play.
On a touch screen a horizontal swipe moves one photo, controls or not.
With the system setting on, slideshows start paused and zoom and swipe fall back to a fade.
Three photos, 4 seconds each, with a slow zoom in. Controls are set to None and the pause button is off, so nothing sits over the photos. The copy is in the centre slot, so any blocks can go there.
Three photos, a slow zoom in.
Each photo slides in from the side, 4 seconds apart, and the slideshow wraps from the last photo to the first. No controls and no pause button.
The pictures sit next to the copy and fade into each other, and each picture keeps its alt text. With controls on, they sit under the pictures.
Five seconds per photo with the transition speed on Slow, so one photo melts into the next.
Photos change slowly, with nothing to click.
With only a single photo there is no navigation row and no script on the page. It is the same block, so adding a second photo in the editor turns it into a slideshow.
Arrows, dots and the pause button. Anything that moves by itself for more than 5 seconds needs a way to stop it (WCAG 2.2.2), so the pause button is on by default; the heroes above turn it off for a cleaner look.
Arrows, dots and a pause button. Swipe, click or press Pause.
