MR SOF02 2.43
Personal DevelopmentFinanceCommunications Skills
Alain ChevalierMonique LegrandMichael Adams
Richard WilsonElena PetrovaJohn Miller
Carousel With Arrow Placement, SelectedIndex and Cyclic
The carousel allows the user to browse through a set of items by swiping right or left. The component is mostly used for showing a gallery of images, but can hold any other HTML element.
When to use
- The items you want to display are very different from each other. - You want to display the items one after the other. When not to use
- The items you want to display need to be visible at the same time. - The items you want to display are uniform and very similar
For the ui5-carousel
ES6 Module Import
You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.
Defines the position of arrows.
Available options are:
When set to "Content", the arrows are placed on the sides of the current page. When set to "Navigation", the arrows are placed on the sides of the page indicator.
Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.
If set to true the navigation is hidden.
Defines when the load-more event is thrown. If not applied the event will not be thrown.
Sets the number of items per page on large size (more than 1024px). One item per page shown by default.
Sets the number of items per page on medium size (from 640px to 1024px). One item per page shown by default.
Sets the number of items per page on small size (up to 640px). One item per page shown by default.
Defines the index of the initially selected item.
This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.
Defines the content of the ui5-carousel.
This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.
Fired for the last items of the ui5-carousel if it is scrolled and the direction of scrolling is to the end. The number of items for which the event is thrown is controlled by the infiniteScrollOffset property.
Fired whenever the selectedIndex changes due to user interaction, when the user clicks on the navigation arrows or while resizing, based on the items-per-page-l, items-per-page-m and items-per-page-s properties.
type: Integer description: the current selectedIndex.
Theme:Quartz LightQuartz DarkQuartz High Contrast BlackQuartz High Contrast WhiteBelizeHigh Contrast BlackHigh Contrast White