Values Slider About Block for React

Each slide is an entry in VALUES at the top of the file: a name, a one-sentence statement, a practice example, and a figure with the measure it counts. The counter, the dots and the carousel's slide count come from the length of the list, so you can add or remove a value without touching anything else. Keep the practice examples to two sentences: every slide is as tall as the tallest one.

With the Previous and Next buttons, with the dots, with the arrow keys while a slide or either button has focus, and by swiping on a touch screen. Both ends wrap round. The dots are real buttons, each named with its value and position ("Say the number, value 2 of 6"), and the one on show is marked as current and drawn longer than the rest, so the state doesn't depend on colour.

No. The slider only moves when someone asks it to, so there is no autoplay to pause and nothing that breaks the rule about moving content. Reduced motion needs nothing special for the same reason.

The carousel is named "Company values", and each slide is a group named with its value and position. Slides that are off view are hidden from assistive technology, so only the visible one is read. After the first move a polite status line announces "Value 3 of 6" and the name; nothing is announced on load. Each slide's name is an h3 under the section's h2.

It uses the Embla-based carousel: the block reads the selected slide from its API and moves it with scrollPrev, scrollNext and scrollTo, so the counter and the dots follow swipes too.

On every target the carousel loops, and the slide's three columns are the same.

Below lg the three parts of a slide stack: the value, then its practice, then its figure, and every slide keeps the height of the tallest. Swiping moves between values; the buttons and each dot are at least 24 pixels square. The counter and buttons wrap under the heading on a phone, and nothing scrolls sideways at 320 pixels. The header and band fade up once on load; with reduced motion they simply appear.