in Carousels Tutorial

Provide users with control over animations in the carousel. Pausing animation is essential for people who find movement distracting or who need more time to read.

Add Play/Stop button

Provide a button to allow users to stop and resume animation. The example below illustrates how such a button can be marked-up. The button label and its function changes, depending on whether the animation is currently running or not.

A working demo example for this code is available.

Pause on mouse hover and keyboard focus

Pause the carousel animation when the mouse pointer is hovering over the carousel or when it receives keyboard focus. Pausing on mouse hover is useful for people who need more time to read the content and makes it easier to click links in the carousel. Keyboard users do not lose their position when the carousel is paused.

Hiding transitioning elements from assistive technologies

During transitions, the current and next items are visible. This also means that those two items are available to assistive technologies, with the current item disappearing, which can be confusing to screen reader users.

In the following example, the item that is being activated gets an in-transition class that makes it visible. The aria-hidden attribute is set to true to hide the item from assistive technologies. When the transition completes, the aria-hidden attribute is removed.

Back to Top