Carousel holds multiple controls and displays them vertically or horizontally next to each other. You can define how many content items should be displayed at once or let the Carousel determine that for you. Navigation is done through buttons or keys.
Constructor for a new Carousel.
Accepts an object literal mSettings
that defines initial property values, aggregated and associated objects as well as event handlers. See sap.ui.base.ManagedObject#constructor for a general description of the syntax of the settings object.
new sap.ui.commons.Carousel(sId?, mSettings?)
Param | Type | Default Value | Description |
---|---|---|---|
sId? | string | ID for the new control, generated automatically if no ID is given |
|
mSettings? | Object | Initial settings for the new control |
Name | Type | Default Value | Description |
---|---|---|---|
animationDuration | int | 500 | Duration for animation when navigating through the contents of the Carousel Visibility: public |
defaultItemHeight | int | 150 | Default height of the item in a carousel if no height can be determined Visibility: public |
defaultItemWidth | int | 150 | Default width of the item in a carousel if no height can be determined Visibility: public |
firstVisibleIndex | int | 0 | The index of the element in the content aggreation which is displayed first on rendering |
handleSize | int | 22 | Determines the size of the handle in pixels. (Height for vertical carousel, width for horizontal carousel) Visibility: public |
height | sap.ui.core.CSSSize | Determines the height of the Carousel Visibility: public |
|
orientation | sap.ui.commons.enums.Orientation | horizontal | Determines the orientation of the Carousel. Can be either "horizontal" or "vertical" Visibility: public |
visibleItems | int | If defined, the carousel displays the number of items defined. Items will be resized to fit the area. Visibility: public |
|
width | sap.ui.core.CSSSize | Determines the width of the Carousel Visibility: public |
Default Aggregation: content
Name | Cardinality | Type | Description |
---|---|---|---|
content (default) | 0..n | sap.ui.core.Control |
Controls which are displayed inside the Carousel |
Method | Description |
---|---|
addContent |
Adds some content to the aggregation content. |
bindContent |
Binds aggregation content to model data. See ManagedObject.bindAggregation for a detailed description of the possible properties of |
calculateAndSetSize |
Calculates and sets the size of the carousel, its items and its buttons |
destroyContent |
Destroys all the content in the aggregation content. |
sap.ui.commons.Carousel.extend |
Creates a new subclass of class sap.ui.commons.Carousel with name
|
getAnimationDuration |
Gets current value of property animationDuration. Duration for animation when navigating through the contents of the Carousel Default value is |
getContent |
Gets content of aggregation content. Controls which are displayed inside the Carousel |
getDefaultItemHeight |
Gets current value of property defaultItemHeight. Default height of the item in a carousel if no height can be determined Default value is |
getDefaultItemWidth |
Gets current value of property defaultItemWidth. Default width of the item in a carousel if no height can be determined Default value is |
getFirstVisibleIndex |
Gets current value of property firstVisibleIndex. The index of the element in the content aggreation which is displayed first on rendering Default value is |
getFocusDomRef |
Returns the DOM Element that should get the focus. To be overwritten by the specific control method. |
getHandleSize |
Gets current value of property handleSize. Determines the size of the handle in pixels. (Height for vertical carousel, width for horizontal carousel) Default value is |
getHeight |
Gets current value of property height. Determines the height of the Carousel |
sap.ui.commons.Carousel.getMetadata |
Returns a metadata object for class sap.ui.commons.Carousel. |
getOrientation |
Gets current value of property orientation. Determines the orientation of the Carousel. Can be either "horizontal" or "vertical" Default value is |
getVisibleItems |
Gets current value of property visibleItems. If defined, the carousel displays the number of items defined. Items will be resized to fit the area. |
getWidth |
Gets current value of property width. Determines the width of the Carousel |
indexOfContent |
Checks for the provided |
insertContent |
Inserts a content into the aggregation content. |
onswipeleft |
If the device supports touch gestures and left swipe is triggered shows the next carousel item |
onswiperight |
If the device supports touch gestures and right swipe is triggered shows the previous carousel item |
removeAllContent |
Removes all the controls from the aggregation content. Additionally, it unregisters them from the hosting UIArea. |
removeContent |
Removes a content from the aggregation content. |
setAnimationDuration |
Sets a new value for property animationDuration. Duration for animation when navigating through the contents of the Carousel When called with a value of Default value is |
setDefaultItemHeight |
Sets a new value for property defaultItemHeight. Default height of the item in a carousel if no height can be determined When called with a value of Default value is |
setDefaultItemWidth |
Sets a new value for property defaultItemWidth. Default width of the item in a carousel if no height can be determined When called with a value of Default value is |
setFirstVisibleIndex |
Setter for property Default value is |
setHandleSize |
Sets a new value for property handleSize. Determines the size of the handle in pixels. (Height for vertical carousel, width for horizontal carousel) When called with a value of Default value is |
setHeight |
Sets a new value for property height. Determines the height of the Carousel When called with a value of |
setOrientation |
Sets a new value for property orientation. Determines the orientation of the Carousel. Can be either "horizontal" or "vertical" When called with a value of Default value is |
setVisibleItems |
Sets a new value for property visibleItems. If defined, the carousel displays the number of items defined. Items will be resized to fit the area. When called with a value of |
setWidth |
Sets a new value for property width. Determines the width of the Carousel When called with a value of |
showElementWithId |
Shows the element with the specified Id. This can be only used after the component is rendered. |
showNext |
Shows the next item in carousel. This can be only used after the component is rendered. |
showPrevious |
Shows the previous item in carousel. This can be only used after the component is rendered. |
unbindContent |
Unbinds aggregation content from model data. |
Adds some content to the aggregation content.
Param | Type | DefaultValue | Description |
---|---|---|---|
oContent | sap.ui.core.Control |
The content to add; if empty, nothing is inserted |
Binds aggregation content to model data.
See ManagedObject.bindAggregation for a detailed description of the possible properties of oBindingInfo
.
Param | Type | DefaultValue | Description |
---|---|---|---|
oBindingInfo | sap.ui.base.ManagedObject.AggregationBindingInfo |
The binding information |
Creates a new subclass of class sap.ui.commons.Carousel with name sClassName
and enriches it with the information contained in oClassInfo
.
oClassInfo
might contain the same kind of information as described in sap.ui.core.Control.extend.
Param | Type | DefaultValue | Description |
---|---|---|---|
sClassName | string |
Name of the class being created |
|
oClassInfo | object |
Object literal with information about the class |
|
FNMetaImpl | function |
Constructor function for the metadata object; if not given, it defaults to the metadata implementation used by this class |
Gets current value of property animationDuration.
Duration for animation when navigating through the contents of the Carousel
Default value is 500
.
Gets current value of property defaultItemHeight.
Default height of the item in a carousel if no height can be determined
Default value is 150
.
Gets current value of property defaultItemWidth.
Default width of the item in a carousel if no height can be determined
Default value is 150
.
Gets current value of property firstVisibleIndex.
The index of the element in the content aggreation which is displayed first on rendering
Default value is 0
.
Returns the DOM Element that should get the focus.
To be overwritten by the specific control method.
Gets current value of property handleSize.
Determines the size of the handle in pixels. (Height for vertical carousel, width for horizontal carousel)
Default value is 22
.
Gets current value of property orientation.
Determines the orientation of the Carousel. Can be either "horizontal" or "vertical"
Default value is horizontal
.
Gets current value of property visibleItems.
If defined, the carousel displays the number of items defined. Items will be resized to fit the area.
Checks for the provided sap.ui.core.Control
in the aggregation content. and returns its index if found or -1 otherwise.
Param | Type | DefaultValue | Description |
---|---|---|---|
oContent | sap.ui.core.Control |
The content whose index is looked for |
Inserts a content into the aggregation content.
Param | Type | DefaultValue | Description |
---|---|---|---|
oContent | sap.ui.core.Control |
The content to insert; if empty, nothing is inserted |
|
iIndex | int |
The |
If the device supports touch gestures and left swipe is triggered shows the next carousel item
Param | Type | DefaultValue | Description |
---|---|---|---|
oEvent | jQuery.Event |
If the device supports touch gestures and right swipe is triggered shows the previous carousel item
Param | Type | DefaultValue | Description |
---|---|---|---|
oEvent | jQuery.Event |
Removes all the controls from the aggregation content.
Additionally, it unregisters them from the hosting UIArea.
Removes a content from the aggregation content.
Param | Type | DefaultValue | Description |
---|---|---|---|
vContent | int string sap.ui.core.Control |
The content to remove or its index or id |
Sets a new value for property animationDuration.
Duration for animation when navigating through the contents of the Carousel
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is 500
.
Param | Type | DefaultValue | Description |
---|---|---|---|
iAnimationDuration | int | 500 |
New value for property |
Sets a new value for property defaultItemHeight.
Default height of the item in a carousel if no height can be determined
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is 150
.
Param | Type | DefaultValue | Description |
---|---|---|---|
iDefaultItemHeight | int | 150 |
New value for property |
Sets a new value for property defaultItemWidth.
Default width of the item in a carousel if no height can be determined
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is 150
.
Param | Type | DefaultValue | Description |
---|---|---|---|
iDefaultItemWidth | int | 150 |
New value for property |
Setter for property firstVisibleIndex
.
Default value is 0
Param | Type | DefaultValue | Description |
---|---|---|---|
iFirstVisibleIndex | int |
new value for property |
Sets a new value for property handleSize.
Determines the size of the handle in pixels. (Height for vertical carousel, width for horizontal carousel)
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is 22
.
Param | Type | DefaultValue | Description |
---|---|---|---|
iHandleSize | int | 22 |
New value for property |
Sets a new value for property height.
Determines the height of the Carousel
When called with a value of null
or undefined
, the default value of the property will be restored.
Param | Type | DefaultValue | Description |
---|---|---|---|
sHeight | sap.ui.core.CSSSize |
New value for property |
Sets a new value for property orientation.
Determines the orientation of the Carousel. Can be either "horizontal" or "vertical"
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is horizontal
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sOrientation | sap.ui.commons.enums.Orientation | horizontal |
New value for property |
Sets a new value for property visibleItems.
If defined, the carousel displays the number of items defined. Items will be resized to fit the area.
When called with a value of null
or undefined
, the default value of the property will be restored.
Param | Type | DefaultValue | Description |
---|---|---|---|
iVisibleItems | int |
New value for property |
Sets a new value for property width.
Determines the width of the Carousel
When called with a value of null
or undefined
, the default value of the property will be restored.
Param | Type | DefaultValue | Description |
---|---|---|---|
sWidth | sap.ui.core.CSSSize |
New value for property |
Shows the element with the specified Id. This can be only used after the component is rendered.
Param | Type | DefaultValue | Description |
---|---|---|---|
sElementId | string |
Id of the element to slide to. |