class sap.ui.commons.Carousel

Control sample: sap.ui.commons.Carousel
Visiblity: public
UX Guidelines:
Implements:
Available since: N/A
Module: sap/ui/commons/Carousel
Application Component: CA-UI5-CTR

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

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


Properties

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

Since: 1.11.0.

Visibility: public
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

Aggregations

Default Aggregation: content

Name Cardinality Type Description
content (default) 0..n sap.ui.core.Control

Controls which are displayed inside the Carousel


Methods Overview

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 oBindingInfo.

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 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.

getAnimationDuration

Gets current value of property animationDuration.

Duration for animation when navigating through the contents of the Carousel

Default value is 500.

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 150.

getDefaultItemWidth

Gets current value of property defaultItemWidth.

Default width of the item in a carousel if no height can be determined

Default value is 150.

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 0.

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 22.

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 horizontal.

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 sap.ui.core.Control in the aggregation content. and returns its index if found or -1 otherwise.

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 null or undefined, the default value of the property will be restored.

Default value is 500.

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 null or undefined, the default value of the property will be restored.

Default value is 150.

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 null or undefined, the default value of the property will be restored.

Default value is 150.

setFirstVisibleIndex

Setter for property firstVisibleIndex.

Default value is 0

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 null or undefined, the default value of the property will be restored.

Default value is 22.

setHeight

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.

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 null or undefined, the default value of the property will be restored.

Default value is horizontal.

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 null or undefined, the default value of the property will be restored.

setWidth

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.

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.

addContent

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

bindContent

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

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 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

getAnimationDuration

Gets current value of property animationDuration.

Duration for animation when navigating through the contents of the Carousel

Default value is 500.

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 150.

getDefaultItemWidth

Gets current value of property defaultItemWidth.

Default width of the item in a carousel if no height can be determined

Default value is 150.

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 0.

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 22.

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 horizontal.

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 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

insertContent

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 0-based index the content should be inserted at; for a negative value of iIndex, the content is inserted at position 0; for a value greater than the current size of the aggregation, the content is inserted at the last position

onswipeleft

If the device supports touch gestures and left swipe is triggered shows the next carousel item

Param Type DefaultValue Description
oEvent jQuery.Event

onswiperight

If the device supports touch gestures and right swipe is triggered shows the previous carousel item

Param Type DefaultValue Description
oEvent jQuery.Event

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.

Param Type DefaultValue Description
vContent int string sap.ui.core.Control

The content to remove or its index or id

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 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 animationDuration

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 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 defaultItemHeight

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 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 defaultItemWidth

setFirstVisibleIndex

Setter for property firstVisibleIndex.

Default value is 0

Param Type DefaultValue Description
iFirstVisibleIndex int

new value for property firstVisibleIndex

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 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 handleSize

setHeight

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 height

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 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 orientation

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 null or undefined, the default value of the property will be restored.

Param Type DefaultValue Description
iVisibleItems int

New value for property visibleItems

setWidth

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 width

showElementWithId

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.

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.