#Overview
A carousel allows multiple pieces of the same type of content to occupy the same space.
They are a good way to show content such as product images which can’t be displayed all at once due to space restrictions.
#When to use
- To show several pieces of the same type of content when there is limited space
#Don’t use for
- As a compromise to fit different content into one space
#Anatomy
#Desktop
Carousels come in various sizes, depending on the content of the carousel. The controls are vertically centered within the parent element.
- Carousel content (this is an example, it can vary)
- Arrow button (72px touch target)
- Carousel dots
#Mobile
We do not show navigation arrows or dots on mobile. The interactivity is hinted by showing a part of the next and/or previous piece of content.
#Color
- Galaxus
- Digitec
#Best practices
#No autoplay
Do
Let the user decide when the content should change.
Don't
Don’t autoplay the carousel. Leave the control in the user’s hands.
#Placement
#Home page
“Recommended for you” and “Trending new arrivals” can be found on the home page. They both use the same layout.
#Product detail page
“Similar products”, “Sales rank”, “Accessories” and “Often bought together” can be found on the Product detail page (PDP).
“Accessories” and “Often bought together” use the same layout.
#Popular accessories
This carousel can be found in the upsell dialog after adding a product to cart, if it has relevant accessories.
#Recently viewed products
This carousel is placed directly above the footer on every page.
#Behavior
#Carousel navigation
The left and right arrows are only shown on hover. The arrows move the carousel 1 step in the corresponding direction.
If the carousel slide is at the first or last page of content, the corresponding arrow button is disabled. Disabling instead of removing the button altogether helps avoid misclicks on the underlying content.
#Carousel dots
The dots are always visible and sit beneath the content as a secondary way to navigate. Clicking a dot moves the carousel to the corresponding piece of content.
The number of dots indicates how many pieces of content the carousel contains. A carousel can have a maximum of 7 dots, regardless of how much content it has. They should be animated in and out if the carousel has content for more than 7 pages.