COMPONENTS
Carousel
A carousel is a container that allows for the horizontal viewing and navigation of panels of content.
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 Container
- Carousel Item
- Previous/Next Arrows
- 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.
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.
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.
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.
All navigational items — arrows and pagination dots are clickable and have interactive 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.
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.
Single direction scroll should be used when the content needs to be viewed in a specific sequence.
Carousel items can be navigated in several ways:
- Selectable arrows
- Swipe gesture
- Clickable pagination indicators
- Keyboard tab and arrow keys
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.
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.
Contents