Carousel Component
A horizontal viewport of grouped or ungrouped content.
Carousels display a list of thematically similar items in a scrolling, horizontal viewport. Items may be entirely static (e.g. an image), entirely interactive (e.g. button) or contain a mix of static and interactive elements (e.g. a heading, image and link).
Items may be ungrouped and scrolled in a continuous manner, or grouped and scrolled via a discrete number of items.
Two pagination buttons ('Previous' & 'Next') will move to the previous slide or next slide respectively. Extra controls may allow access to specific slides (for examples, small pagination "dots" under the carousel).
Terminology
We use the following terminology when discussing this pattern.
Viewport: Visible content area of the carousel. Displays a single slide.
- Continuous carousel : items are ungrouped
- Discrete carousel : items are grouped into slides
- Slide : Contains one or more items
- Item : A discrete unit of content inside of a slide (e.g. a tile or image)
- Peek : A partially visible preview of an item on the next or previous slide. Peeks serves as a visual indicator that more slides exist (discrete carousel only)
- Next Button/Paddle : Scrolls viewport forward / moves to next slide
- Previous Button/Paddle : Scrolls viewport left / moves to previous slide
- Pagination Buttons/Dots (optional) : Move to specific slide. Also serve as visual indicators for total number of slides and current slide index (discrete carousel only)
- Pagination Bar (optional) : A scrollbar alternative to pagination buttons. Gives fuzzy visual indicator for total number of slides and current slide index