Introduction
A carousel allows users to navigate through multiple content items horizontally. Carousels are used to accommodate a larger quantity of items that the available view width allows, hiding items in the sequence that extend beyond the carousel container.
Usage
Carousel should only be used to display noncritical, secondary information, such as blog or product cards. While there is no limit of displayed items per se, the minimum number of items in a carousel is larger than four and a suggested maximum of 12.
- use a carousel to display secondary information horizontally
- display between 4-12 items
- include previous/next icon buttons for easy navigation
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.
Mobile Usage
On screen-widths smaller than 576px, the width of the checkbox should be set to 100vw.
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.
Also known as
Horizontal slider, horizontal scroll gallery, off-canvas scroll box