Phone Frame Carousel Gallery Block for React

Each entry in SCREENS has an id, a tab label, a heading and a sentence, and ScreenFor returns the drawing for an id. Replace a drawing with an img or a live component inside the phone's screen box, and keep the sentence: it is the description screen readers get. Add or remove entries and the row, the tabs and the panels follow; the shift classes in AT need one entry per screen.

The row is as wide as the band and every phone has the same width, so the shift is a single CSS calculation: half the band, minus half a phone, minus the number of phones before the chosen one times a phone and a gap. There is no measuring and no script on resize. The neighbours are the same size, veiled by a layer in your background colour.

The tabs are the control: Tab reaches the list, the arrow keys move between the five names, and Home and End go to the first and last, so the chosen screen follows. The peeking phones can also be clicked or tapped, but they are not in the tab order, since the tabs already do the same job. The phones themselves are hidden from screen readers; the panel under them is what is read. Choosing a tab with the arrow keys selects it, so the row slides as you go.

Yes. A swipe of about 40 pixels or more moves to the next or previous screen (the other way in a right-to-left page), and the tabs above scroll sideways when they do not fit. Vertical scrolling still passes through the band.

The row and the veil change at once, with no transition. Nothing in this block moves by itself.

The row starts at the end and the shift is mirrored, so the chosen screen is still centred and the first tab is at the end. The amounts in the drawings are isolated so signs and digits keep their order, and the chart is left to right on purpose.