Carousel

Carousels stack the same type of items and allows scrolling through them horizontally.

• Navigation Controls: Carousels should have easy-to-find navigation controls for scrolling through content.
• Supports any content: Carousels can be used in different contexts and shouldn’t be limited to a specific child component. In some scenarios you might want items within the same carousel to differ from each other.
• Items width customisation: For simple products, it might be fine to use multiple predefined sizes for carousel items. For more flexibility, it’s good to provide a way to define a custom width.
• Touch events support: Carousels should be scrollable on touch devices. Some of the best practices are to use native scrolling and to make sure you’re supporting the same behaviour for all touch devices, not just mobile phones.
• Keyboard navigation: It should be possible to scroll through content with keyboard arrows when focused on navigation controls.
• Responsiveness: It’s good practice to hide or reduce the size of navigation controls for mobile viewports to improve the visibility of the content.