Components/Carousel
fd-carousel · 6 examples from SAP's documentation · Back to the gallery
About
The carousel component is used for browsing through a set of images. One or several items can be displayed at a time, and the user can navigate to either the next or the previous item. The size of the content area automatically adjusts depending on the available screen space. On non-touchable devices, the buttons on the left and right side of the content are used for navigation. The buttons either float on the left and right side or appear in the page indicator area. On touchable devices, the user navigates with a swipe gesture and the buttons are not displayed.
**Use the carousel if:** - You want a strong visual representation of the items you want to display. - You want to display items sequentially or side by side. **Do not use the carousel if:** - The items you want to display are uniform - The items you want to display are uniform
Bottom page indicator
The bottom page indicator carousel displays a content area, navigation buttons and a page indicator at the bottom. The page indicator wraps onto the next line if the content is too long, and after the pages reach a count of 8, the dots are replaced by numerical representation i.e. *1 of 4*.
Navigation buttons in page indicator (focussed)
Navigation buttons in page indicator (vertical)
Content navigation buttons
Content navigation buttons (vertical)
Numeric page indicator
No page indicator
Top page indicator
The top page indicator carousel displays a content area, navigation buttons and a page indicator at the top.
Navigation buttons in page indicator
Navigation buttons in content
Numeral format for page indicator
No page indicators
Hidden navigation buttons
Carousel can also be displayed without navigation buttons. To hide them, add the \
Hiding navigation buttons in page indicator
Hiding navigation buttons in the content
Background modifiers
The background of the Carousel Content and Page Indicator Container can be changed by modifier classes. Carousel ContentThe default background for the Carousel Content is translucent. For transparent background apply \
Transparent Carousel Content
Solid Carousel Content
Transparent Page Indicator Container
Translucent Page Indicator Container
Page Indicator Container with no border
Items in horizontal direction
Carousel will have items which will spread horizontally and will be visible on navigation. For translate animation effect to work, all items should be in DOM.
Items in horizontal direction
Items loading error
Error message can be displayed when items could not be loaded. Error message can be composed using Message page component. For mixed data use sapIllus-Scene-ReloadScreen illustration, and for images in Carousel use sapIllus-Dialog-UnableToLoadImage illustration.