Welcome Slides Carousel Onboarding Block for React

Edit SLIDES: each has an id, a short label for its dot, a title and a sentence. The drawing for a slide is chosen by its id in Drawing; to add a slide, add its drawing there, or replace the drawings with your own product screenshots inside the GROUND box. Keep to four or five: an intro that needs more is a tour, and the onboarding tour points at real parts of the app.

Next and Previous, the dots, and a swipe on a touch screen all change the slide, and the step header's count and progress follow. Previous waits, marked unavailable, on the first slide. The arrow keys move the slide when focus is on Next, Previous or a dot, and follow the page's direction. The carousel swaps slides with a swipe or its API; the arrow keys work from the buttons and the dots.

No. Slides that move on their own are hard to read and, past five seconds, a failure of the pause rule. This one only moves when asked, and reduced motion removes its transitions.

Here each shows a result under the panel and sends nothing: saved in this demo for Get started, skipped in this demo for Skip. In your app Get started should record that the intro was seen and open your first real step; Skip should do the same and drop the person into the app, so the slides don't come back.

The page has one hidden heading, “Welcome to Counthurst: four things to know”, and each slide's title is a level 2 heading. Off-screen slides are hidden from assistive technology, each dot is a button named “Slide 2 of 4: Bank feeds” with the current one marked, and a polite status message reads the slide when it changes. The drawings are hidden: each slide's sentence says what they show.

The panel fills the width with a 200 px drawing, and the actions stick to the foot of the screen with Next on top, so the primary action is always in reach. Slides swipe; the dots and the step header show where you are.