Stepped Before and After Gallery Block for React

Tab goes to the room tabs and then to the slider's thumb. Home and End jump to Before and After, and the arrow keys step one stage at a time. The thumb is spoken as the stage ("During, stage 2 of 3"), and a polite line names the room, the stage and the note. On the Ark build the vertical slider answers Up and Down, and the horizontal one on a phone answers Left and Right; the other three bases accept either pair.

The three stages are three drawings stacked in one box. A layer is shown once the slider has reached its stage, by a clip that opens from the foot of the picture upward, so moving the slider up rises the next layer over the last. Nothing moves the page, and under reduced motion the layers simply change place.

The picture, the note and the three facts change; the slider keeps the stage you chose, so you can compare the kitchen and the bathroom at the same point in the job. The block's height stays the same for every room and stage.

A slider cannot change its direction with CSS, so a vertical one is drawn from lg and a horizontal one below it; the one that is hidden is not shown and cannot take focus. Both write the same stage.

Each room has three stage descriptions and a scene per stage. Replace the Scene in a layer with <img alt="" className="size-full object-cover" src={…} /> (the picture's role="img" label already describes it) and keep the three layers the same size.

No. They are written into the data as example figures for a made-up studio, so the page reads the same on the server and in the browser.