Resources
Intro & Anatomy
A carousel allows users to navigate through multiple content items horizontally, accommodating larger quantities of items than the available view width allows.
Use carousels to display collections of related content where users can browse through items without overwhelming the interface, e.g. product recommendations, blog previews, or image galleries.
Options & Styles
Slider
Carousels can include icon buttons for previous/next navigation or function without them, depending on the interaction model and platform requirements.
Content
You can display any content type including product cards, content previews, images, or other components that benefit from horizontal browsing.
Best Practice & Usage
Carousels should display secondary, related content with clear navigation options whilst avoiding critical information that users must see.
Use carousels to display secondary information horizontally for efficient space utilisation.
Display between 4-12 items to maintain usability without overwhelming users. Include previous/next icon buttons for easy navigation and content discovery.
Use a carousel to display secondary content, such as blog posts or product cards.
Don’t display critical information in a carousel, such as sign up or legal information.
Use carousel to display preview items of larger content items.
Don’t use a carousel to display long form content. If you still would like to hide certain aspects, use an accordion instead.
Use one carousel to display content from one source.
Don’t use a carousel display content from multiple sources
Always display available the previous/next icon button as well as a “show all” button.
Don’t hide navigational elements on desktop. Users should be able to navigate a carousel easily.
On mobile, no more than 2 items should be displayed at once, hide the rest off-canvas. Further, the mobile slider omits the previous/next button as to give the user a mobile native scrolling experience.
Be mindful of the available space. Don't display too many items at once.
Theming
You can customise colours, font styles and weights, border width and radius, and spacings to match your design requirements.