There are front and back buttons
Swiping can be a complementary way, but should not be the only way to move items.
Carousel Design system
Allows you to browse content sequentially while still controlling the location.
Checklist contents
Review progress
01
Structure and meaning
Compare information and presentation in context of use.
02
Interaction and usability
Try the operation, change the status and continue working.
03
Complete the experience
Check for details that are easy to miss when putting the design into use.
Progress is saved automatically in this browser.
GUIDANCE
How to review
EXAMPLES
Usage examples
There are front and back buttons
Product photos have “Previous Photo,” “Next Photo” buttons, and a 2/5 label.
Variants and use cases
How to transfer content
Supports front/rear buttons and appropriate touch operations; Avoid forcing people to swipe.
Try using just the keyboard and then try touch; both ways go to the same items.
Example The “Next Photo” button works with a horizontal swipe.
Location in the content set
Indicate which item you are viewing and the total number of items with a clear enough label.
Switch with buttons and swipes; The counter must update with the image being viewed.
Example Shows “Photo 2 / 5” instead of five dots without names.
Controlled movement
If moving manually, stop and respect the device's choice to reduce movement.
Turn on reduced motion and focus on the carousel; Do not change the content you are reading.
Example The Carousel stops running automatically when the user begins to interact.
The item is being viewed
Keep the content and actions of the current item clear, do not let focus on hidden slides.
Tab through carousel with multiple slides; Links outside the current slide do not receive focus.
Example Only the product details button is currently in the Tab order.