Carousels
A carousel presents many items of a component such cards, images or videos within one view so that each component item is seen one at a time at the same location on the screen.
Usage
Use a carousel when you need to present a set of items, such as cards, images or videos, and space is too limited to present items in other ways.
Best practice
- Make sure are enough items to warrant a carousel. If there are only one or two the user may become frustrated having been deceived into thinking there would be more items.
- If there are too many items, a user may become tired of navigating through them. In this case, consider breaking the number of items down by topic using the filtered option.
- Carousels need to clearly indicate there is more items available so affective carousel left / right navigation is very important.
- The carousel navigation (e.g. buttons) should look noticeably different in its hover state to indict its purpose as a button.
- A progress bar lets a user know how many images there are to cycle through.
Accessibility
- Carousel navigation controls need to be accessible by users with disabilities. Check that a user can navigate affectively via tabbing.
