Intro
https://www.sap.com/design-system/live-examples/Carousel/Carousel_LE_basic.html
Carousel – live example
When to Use
Do
Use the carousel:
- To let users browse through a set of items by paging back and forth.
- To display items sequentially.
- To display items side by side.
Don't
Don’t use the carousel:
- If the items you want to display need to be visible at the same time.
- If the items you want to display are very similar.
Anatomy
1. Container: Holds the content, navigation buttons, and page indicator.
2. Navigation buttons: Allow users to page backward and forward between items. You can place the navigation buttons either in the content area or on each side of the page indicator.
3. Page indicator: Indicates the current page in the sequence. If there are fewer than 9 pages, the page indicator is visualized as a series of dots by default. For more information, see Show/Hide Page Indicator and Page Indicator Style.
4. Content: Can contain any component.
Anatomy of a carousel
Types
You can adapt the following carousel parameters:
- Position and visibility of the navigation buttons
- Visibility of the page indicator
- Style of the page indicator
- Looping behavior
- Number of items per page
Navigation Buttons
You can configure the navigation buttons in three ways:
- Show in the content area
- Show with the page indicator
- Hide completely
By default, navigation buttons are never shown on touch devices.
In the Content Area
https://www.sap.com/design-system/live-examples/Carousel/Carousel_LE_HiddenArrows.html
Navigation buttons on top of the content – live example
With the Page Indicator
https://www.sap.com/design-system/live-examples/Carousel/Carousel_SE_basic.html
Navigation buttons with the page indicator
Hidden
https://www.sap.com/design-system/live-examples/Carousel/Carousel_SE_HiddenArrows.html
Hidden navigation buttons
Show/Hide Page Indicator
By default, the page indicator is located below the content. You can also hide it.
https://www.sap.com/design-system/live-examples/Carousel/Carousel_SE_basic.html
Page indicator below the content
Page Indicator Style
You can display the page indicator as a series of dots or numerically.
Dot Style
The page indicator shows a horizontal series of dots, each of which represents a page in the carousel. The dot for the current page is highlighted.
By default, the page indicator uses the dot style if there are fewer than 9 pages.
https://www.sap.com/design-system/live-examples/Carousel/Carousel_SE_basic.html
Page indicator – dot style
Numeric Style
The numeric page indicator shows the current page and the total number of pages (for example, “2 of 4”).
By default, the page indicator switches to the numeric style if there are 9 pages or more.
https://www.sap.com/design-system/live-examples/Carousel/Carousel_SE_NumericPageIndicator.html
Page indicator – numeric style
Cyclic
You can set the carousel to loop. Navigating forward on the last page then returns the user to the first page, and vice versa.
Multiple Items Per Page
You can display multiple items at once. The page navigation buttons then have the following effect:
- Previous Page: The previous item slides into view on the left. The right-most item slides out of view on the right.
- Next Page: The next item slides into view on the right. The left-most item slides out of view on the left.
https://www.sap.com/design-system/live-examples/Carousel/Carousel_LE_MultipleItems.html
Carousel with multiple items per page – live example
Behavior and Interaction
Click
https://www.sap.com/design-system/live-examples/Carousel/Carousel_LE_basic.html
Carousel – live example
Hover
https://www.sap.com/design-system/live-examples/Carousel/Carousel_LE_MultipleItemsHiddenArrows.html
Navigation in the content area – navigation buttons appear on hover – live example
Touch Enablement
On touch devices, the carousel component makes use of the swipe gesture to page through the items. The navigation buttons are not displayed on touch devices.
Responsive Behavior
Responsive Behaviour
- If the width and height of the carousel is set to 100% (default), the component content area is adjusted automatically, depending on the amount of space available.
- On touch devices, swipe gestures are used to navigate through the pages.
- The paging indicator wraps if it is too long to fit onto one line.
Content Density
The content inside the carousel can appear in two different sizes:
- The cozy size uses component dimensions large enough to enable fingertip interaction. This factor is ideal for devices operated by touch.
- The compact size reduces the component dimensions, allowing more information to be displayed on the UI. This factor is ideal for devices operated by mouse and keyboard.
The page indicator (when activated) shows on all form factors.
https://www.sap.com/design-system/live-examples/Carousel/Carousel_SE_OneItemCompact.html
Carousel in compact mode
https://www.sap.com/design-system/live-examples/Carousel/Carousel_SE_OneItemLTR.html
Carousel in cozy mode
Globalization and Localization
When using the carousel, bear in mind that it may be used with languages that read and write from right to left.
The arrow navigation and looping behavior (if activated) adapt accordingly.
https://www.sap.com/design-system/live-examples/Carousel/Carousel_SE_OneItemLTR.html
Carousel in left-to-right mode
https://www.sap.com/design-system/live-examples/Carousel/Carousel_SE_OneItemRTL.html
Carousel in right-to-left mode