Carousel

A carousel is a container displaying
multiple content items horizontally

carousel/mainImage

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
carousel/do1
carousel/dont1
carousel/do2
carousel/dont2
carousel/do3
carousel/dont3
carousel/do4
carousel/dont4

Mobile Usage

On screen-widths smaller than 576px, the width of the checkbox should be set to 100vw.

carousel/mobile/do
carousel/mobile/dont

Also known as

Horizontal slider, horizontal scroll gallery, off-canvas scroll box