Carousel SAP SE The carousel allows the user to browse through a set of items by swiping right or left. <h3>Overview</h3> The control is mostly used for showing a gallery of images, but can hold any sap.m control. <h3>Structure</h3> The carousel consists of a the following elements: <ul> <li>Content area - displays the different items.</li> <li>Navigation - arrows to the left and right for switching between items.</li> <li>(optional) Paging - indicator at the bottom to show the current position in the set.</li> </ul> The paging indicator can be configured as follows: <ul> <li><code>showPageIndicator</code> - determines if the indicator is displayed.</li> <li>If the pages are less than 9, the page indicator is represented with bullets.</li> <li>If the pages are 9 or more, the page indicator is numeric.</li> <li><code>pageIndicatorPlacement</code> - determines where the indicator is located. Default (<code>sap.m.PlacementType.Bottom</code>) - below the content.</li> </ul> Additionally, you can also change the location of the navigation arrows. By setting <code>arrowsPlacement</code> to <code>sap.m.CarouselArrowsPlacement.PageIndicator</code>, the arrows will be located at the bottom by the paging indicator. Note: When the content is of type <code>sap.m.Image</code> add "Image" text at the end of the <code>"alt"</code> description in order to provide accessibility info for the UI element. <h3>Usage</h3> <h4> When to use</h4> <ul> <li>The items you want to display are very different from each other.</li> <li>You want to display the items one after the other.</li> </ul> <h4> When not to use</h4> <ul> <li>The items you want to display need to be visible at the same time.</li> <li>The items you want to display are uniform and very similar</li> </ul> <h3>Responsive Behavior</h3> <ul> <li>On touch devices, navigation is performed with swipe gestures (swipe right or swipe left).</li> <li>On desktop, navigation is done with the navigation arrows.</li> <li>The paging indicator (when activated) is visible on each form factor.</li> </ul> sap.ui.core/Control The height of the carousel. Note that when a percentage value is used, the height of the surrounding container must be defined. The width of the carousel. Note that when a percentage value is used, the height of the surrounding container must be defined. Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa. Show or hide carousel's page indicator. Defines where the carousel's page indicator is displayed. Possible values are sap.m.PlacementType.Top, sap.m.PlacementType.Bottom. Other values are ignored and the default value will be applied. The default value is sap.m.PlacementType.Bottom. Show or hide busy indicator in the carousel when loading pages after swipe. Since 1.18.7 pages are no longer loaded or unloaded. Therefore busy indicator is not necessary any longer. Defines where the carousel's arrows are placed. Default is <code>sap.m.CarouselArrowsPlacement.Content</code> used to place the arrows on the sides of the carousel. Alternatively <code>sap.m.CarouselArrowsPlacement.PageIndicator</code> can be used to place the arrows on the sides of the page indicator. Carousel requires a new page to be loaded. This event may be used to fill the content of that page Since 1.18.7 pages are no longer loaded or unloaded Id of the page which will be loaded Carousel does not display a page any longer and unloads it. This event may be used to clean up the content of that page. Since 1.18.7 pages are no longer loaded or unloaded Id of the page which will be unloaded This event is fired after a carousel swipe has been completed. It is triggered both by physical swipe events and through API carousel manipulations such as calling 'next', 'previous' or 'setActivePageId' functions. ID of the page which was active before the page change. ID of the page which will be active after the page change. Indexes of all active pages after the page change. This event is fired before a carousel swipe has been completed. It is triggered both by physical swipe events and through API carousel manipulations such as calling 'next', 'previous' or 'setActivePageId' functions. Indexes of all active pages after the page change. The content which the carousel displays. Defines how many pages are displayed in the visible area of the <code>Carousel</code> control. <b>Note:</b> When this property is used, the <code>loop</code> property is ignored. Provides getter and setter for the currently displayed page. For the setter, argument may be the control itself, which must be member of the carousel's page list, or the control's id. The getter will return the control id Call this method to display the previous page (corresponds to a swipe left). Returns 'this' for method chaining. Call this method to display the next page (corresponds to a swipe right). Returns 'this' for method chaining.