A carousel is a container that allows for the horizontal viewing and navigation of panels of content.

Carousel Intro

DESIGN ONLY: This page outlines the latest design guidance from the Goldman Sachs Design System. This component is not yet implemented in code. Future guidance may change to support code implementation or new research and methods.

Carousel Anatomy
  1. Carousel Container
  2. Carousel Item
  3. Previous/Next Arrows
  4. Pagination Indicators

Carousel items can be full width or partial width inside of the carousel container. Fluid items are set to span the full width of the carousel container. Fixed items are set to fill a percentage or pixel value within the container with the remainder of the space in the container being filled with peeks of the other carousel items.

Carousel Item Width

Carousels can be set to have a certain number of items per page. When navigating the carousel all page items transition together. For example, when three items are set per page, the inital three items move off screen and the following three items come into view. The number items shown can be adjusted per breakpoint to show more when more space is available.

Carousel Items per page

The pagination arrows can be positioned in three locations — center, top right or bottom right. When using the center positioned the arrows display over the carousel items adjacent to the left and right inner sides of the carousel container. When positioned top right or bottom right they do not overlay the carousel items.

Carousel Arrow

Pagination indicators have two types — contrast or primary. They can be positioned as an overlay or below the carousel items. In both cases the indicators should be centered. When positioned as an overlay the contrast type should be used.

Pagination Types

All navigational items — arrows and pagination dots are clickable and have interactive states. 

Carousel Arrow States
Carousel Pagination States

Carousel items should be animated to follow the direction of the click and by default should use an animation speed of 500ms for the transition. If using autoplay, default each slide is time to display for a minimum of 2 seconds and move in a slide transition for 500ms. Carousels should be set to only autoplay once and end on the initial carousel item. A user interacting with the carousel should turn off autoplay.

Carousel States

Infinite scroll transition does not bring user back the way they traversed through the carousel, but instead presents the slides again in the same direction.

Carousel Infinite Scroll

Single direction scroll should be used when the content needs to be viewed in a specific sequence.

Single Scroll

Carousel items can be navigated in several ways:

  1. Selectable arrows
  2. Swipe gesture
  3. Clickable pagination indicators
  4. Keyboard tab and arrow keys
Carousel Navigation

Carousel uses the swipe gesture on mobile devices to paginate between items. Arrows can be hidden on mobile if swipe is enabled and pagination dots are present or there is a peek of the other carousel items.

Carousel Mobile

Carousels should be built as a tab list so that users can navigate via tab on the keyboard to access the next carousel item. Enter would select the call to action displayed on the carousel item. If multiple links or actions are present on a carousel item, then the keyboard arrows should be used to navigate.

Carousel Accessibility
Carousel Example
Carousel Examples 2
Carousel Example Metric
Carousel Example Hero