Autoplay feature tabs

Use it for

• Feature sections that walk through three to five product areas
• Landing pages where a panel mock should change without a click
• Tours where people can still jump straight to the part they care about

Avoid

• More than five tabs, where waiting for the cycle gets tedious
• Panels with long text, which people cannot finish before the switch

How it works

The active tab's progress line is a CSS animation, and its animationend event selects the next tab, so there is no timer to keep in sync. Hover, keyboard focus and leaving the viewport set one data attribute that pauses that animation, which pauses the whole carousel. All panels share one grid cell and crossfade with opacity and translate, sliding in from the side they come from, while visibility hides the inactive ones. A container query turns the vertical list into a row of short labels with horizontal lines on narrow screens.

Accessibility

It follows the tabs pattern: a tablist of buttons with roving tabindex, arrow, Home and End keys, and labelled tabpanels. Autoplay pauses on hover and keyboard focus. Reduced motion turns autoplay off and swaps panels without movement.