Carousel

extends Control

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.

Deprecated API:Since version 1.38. Instead, use the sap.m.Carousel control.

Since: 1.8.0.

Constructor Summary

new sap.ui.commons.Carousel(sId?, mSettings?)Constructor for a new Carousel.

Events borrowed from class sap.ui.core.Control

validateFieldGroup

Events borrowed from class sap.ui.base.ManagedObject

formatError, modelContextChange, parseError, validationError, validationSuccess

Method Summary

sap.ui.commons.Carousel.extend(sClassName, oClassInfo?, FNMetaImpl?)Creates a new subclass of class sap.ui.commons.Carousel with name sClassName and enriches it with the information contained in oClassInfo.

sap.ui.commons.Carousel.getMetadata()Returns a metadata object for class sap.ui.commons.Carousel.

addContent(oContent)Adds some content to the aggregation content.

bindContent(oBindingInfo)Binds aggregation content to model data.

calculateAndSetSize()Calculates and sets the size of the carousel, its items and its buttons

destroyContent()Destroys all the content in the aggregation content.

getAnimationDuration()Gets current value of property animationDuration.

getContent()Gets content of aggregation content.

getDefaultItemHeight()Gets current value of property defaultItemHeight.

getDefaultItemWidth()Gets current value of property defaultItemWidth.

getFirstVisibleIndex()Gets current value of property firstVisibleIndex.

getFocusDomRef()Returns the focused DOM element

getHandleSize()Gets current value of property handleSize.

getHeight()Gets current value of property height.

getOrientation()Gets current value of property orientation.

getVisibleItems()Gets current value of property visibleItems.

getWidth()Gets current value of property width.

indexOfContent(oContent)Checks for the provided sap.ui.core.Control in the aggregation content.

insertContent(oContent, iIndex)Inserts a content into the aggregation content.

onswipeleft(oEvent)If the device supports touch gestures and left swipe is triggered shows the next carousel item

onswiperight(oEvent)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.

removeContent(vContent)Removes a content from the aggregation content.

setAnimationDuration(iAnimationDuration)Sets a new value for property animationDuration.

setDefaultItemHeight(iDefaultItemHeight)Sets a new value for property defaultItemHeight.

setDefaultItemWidth(iDefaultItemWidth)Sets a new value for property defaultItemWidth.

setFirstVisibleIndex(iFirstVisibleIndex)Setter for property firstVisibleIndex.

setHandleSize(iHandleSize)Sets a new value for property handleSize.

setHeight(sHeight)Sets a new value for property height.

setOrientation(sOrientation)Sets a new value for property orientation.

setVisibleItems(iVisibleItems)Sets a new value for property visibleItems.

setWidth(sWidth)Sets a new value for property width.

showElementWithId(sElementId)Shows the element with the specified Id.

showNext()Shows the next item in carousel.

showPrevious()Shows the previous item in carousel.

unbindContent()Unbinds aggregation content from model data.

Methods borrowed from class sap.ui.core.Control

Methods borrowed from class sap.ui.core.Element

Methods borrowed from class sap.ui.base.ManagedObject

addAggregation, addAssociation, applySettings, attachFormatError, attachModelContextChange, attachParseError, attachValidationError, attachValidationSuccess, bindAggregation, bindContext, bindObject, bindProperty, destroyAggregation, detachFormatError, detachModelContextChange, detachParseError, detachValidationError, detachValidationSuccess, findAggregatedObjects, fireFormatError, fireModelContextChange, fireParseError, fireValidationError, fireValidationSuccess, getAggregation, getAssociation, getBinding, getBindingContext, getBindingInfo, getBindingPath, getEventingParent, getId, getModel, getObjectBinding, getOriginInfo, getParent, getProperty, hasModel, indexOfAggregation, insertAggregation, isBound, isInvalidateSuppressed, isTreeBinding, propagateMessages, removeAggregation, removeAllAggregation, removeAllAssociation, removeAssociation, setAggregation, setAssociation, setBindingContext, setModel, setProperty, unbindAggregation, unbindContext, unbindObject, unbindProperty, validateAggregation, validateProperty

Methods borrowed from class sap.ui.base.EventProvider

attachEvent, attachEventOnce, detachEvent, hasListeners

Constructor Detail

new sap.ui.commons.Carousel(sId?, mSettings?)

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 for a general description of the syntax of the settings object.

The supported settings are:

Properties
- orientation : sap.ui.commons.enums.Orientation (default: horizontal)
- width : sap.ui.core.CSSSize
- height : sap.ui.core.CSSSize
- defaultItemHeight : int (default: 150)
- defaultItemWidth : int (default: 150)
- animationDuration : int (default: 500)
- visibleItems : int
- handleSize : int (default: 22)
- firstVisibleIndex : int (default: 0)
Aggregations
- content : sap.ui.core.Control[] (default)

In addition, all settings applicable to the base type sap.ui.core.Control can be used as well.

Parameters:

{string}	sId?	ID for the new control, generated automatically if no ID is given
{Object}	mSettings?	Initial settings for the new control

Deprecated:
Since version 1.38. Instead, use the sap.m.Carousel control.

Method Detail

sap.ui.commons.Carousel.extend(sClassName, oClassInfo?, FNMetaImpl?): function

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.

Parameters:

{string}	sClassName	Name of the class being created
{object}	oClassInfo?	Object literal with information about the class
{function}	FNMetaImpl?	Constructor function for the metadata object; if not given, it defaults to `sap.ui.core.ElementMetadata`

Returns:

{function}

Created class / constructor function

sap.ui.commons.Carousel.getMetadata(): sap.ui.base.Metadata

Returns a metadata object for class sap.ui.commons.Carousel.

Returns:

{sap.ui.base.Metadata}

Metadata object describing this class

addContent(oContent): sap.ui.commons.Carousel

Adds some content to the aggregation content.

Parameters:

{sap.ui.core.Control}

oContent

the content to add; if empty, nothing is inserted

Returns:

{sap.ui.commons.Carousel} Reference to this in order to allow method chaining

bindContent(oBindingInfo): sap.ui.commons.Carousel

Binds aggregation content to model data.

See ManagedObject.bindAggregation for a detailed description of the possible properties of oBindingInfo.

Parameters:

{object}

oBindingInfo

The binding information

Returns:

{sap.ui.commons.Carousel} Reference to this in order to allow method chaining

calculateAndSetSize()

Calculates and sets the size of the carousel, its items and its buttons

destroyContent(): sap.ui.commons.Carousel

Destroys all the content in the aggregation content.

Returns:

{sap.ui.commons.Carousel} Reference to this in order to allow method chaining

getAnimationDuration(): int

Gets current value of property animationDuration.

Duration for animation when navigating through the contents of the Carousel

Default value is 500.

Returns:

{int} Value of property animationDuration

getContent(): sap.ui.core.Control[]

Gets content of aggregation content.

Controls which are displayed inside the Carousel

Returns:

{sap.ui.core.Control[]}

getDefaultItemHeight(): int

Gets current value of property defaultItemHeight.

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

Default value is 150.

Returns:

{int} Value of property defaultItemHeight

getDefaultItemWidth(): int

Gets current value of property defaultItemWidth.

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

Default value is 150.

Returns:

{int} Value of property defaultItemWidth

getFirstVisibleIndex(): int

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.

Since:: 1.11.0

Returns:

{int} Value of property firstVisibleIndex

getFocusDomRef(): jQuery

Returns the focused DOM element

Returns:

{jQuery}

The focused DOM element

getHandleSize(): int

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.

Returns:

{int} Value of property handleSize

getHeight(): sap.ui.core.CSSSize

Gets current value of property height.

Determines the height of the Carousel

Returns:

{sap.ui.core.CSSSize} Value of property height

getOrientation(): sap.ui.commons.enums.Orientation

Gets current value of property orientation.

Determines the orientation of the Carousel. Can be either "horizontal" or "vertical"

Default value is horizontal.

Returns:

{sap.ui.commons.enums.Orientation} Value of property orientation

getVisibleItems(): int

Gets current value of property visibleItems.

If defined, the carousel displays the number of items defined. Items will be resized to fit the area.

Returns:

{int} Value of property visibleItems

getWidth(): sap.ui.core.CSSSize

Gets current value of property width.

Determines the width of the Carousel

Returns:

{sap.ui.core.CSSSize} Value of property width

indexOfContent(oContent): int

Checks for the provided sap.ui.core.Control in the aggregation content. and returns its index if found or -1 otherwise.

Parameters:

{sap.ui.core.Control}

oContent

The content whose index is looked for

Returns:

{int}

The index of the provided control in the aggregation if found, or -1 otherwise

insertContent(oContent, iIndex): sap.ui.commons.Carousel

Inserts a content into the aggregation content.

Parameters:

{sap.ui.core.Control}	oContent	the content to insert; if empty, nothing is inserted
{int}	iIndex	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

Returns:

{sap.ui.commons.Carousel} Reference to this in order to allow method chaining

onswipeleft(oEvent)

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

Parameters:

{jQuery.Event}

oEvent

onswiperight(oEvent)

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

Parameters:

{jQuery.Event}

oEvent

removeAllContent(): sap.ui.core.Control[]

Removes all the controls from the aggregation content.

Additionally, it unregisters them from the hosting UIArea.

Returns:

{sap.ui.core.Control[]}

An array of the removed elements (might be empty)

removeContent(vContent): sap.ui.core.Control

Removes a content from the aggregation content.

Parameters:

{int|string|sap.ui.core.Control}

vContent

The contentto remove or its index or id

Returns:

{sap.ui.core.Control} The removed content or null

setAnimationDuration(iAnimationDuration): sap.ui.commons.Carousel

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.

Parameters:

{int} iAnimationDuration New value for property animationDuration

Returns:

{sap.ui.commons.Carousel} Reference to this in order to allow method chaining

setDefaultItemHeight(iDefaultItemHeight): sap.ui.commons.Carousel

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.

Parameters:

{int} iDefaultItemHeight New value for property defaultItemHeight

Returns:

{sap.ui.commons.Carousel} Reference to this in order to allow method chaining

setDefaultItemWidth(iDefaultItemWidth): sap.ui.commons.Carousel

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.

Parameters:

{int} iDefaultItemWidth New value for property defaultItemWidth

Returns:

{sap.ui.commons.Carousel} Reference to this in order to allow method chaining

setFirstVisibleIndex(iFirstVisibleIndex): sap.ui.commons.Carousel

Setter for property firstVisibleIndex.

Default value is 0

Parameters:

{int} iFirstVisibleIndex new value for property firstVisibleIndex

Since:: 1.11.0

Returns:

{sap.ui.commons.Carousel} this to allow method chaining

setHandleSize(iHandleSize): sap.ui.commons.Carousel

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.

Parameters:

{int} iHandleSize New value for property handleSize

Returns:

{sap.ui.commons.Carousel} Reference to this in order to allow method chaining

setHeight(sHeight): sap.ui.commons.Carousel

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.

Parameters:

{sap.ui.core.CSSSize} sHeight New value for property height

Returns:

{sap.ui.commons.Carousel} Reference to this in order to allow method chaining

setOrientation(sOrientation): sap.ui.commons.Carousel

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.

Parameters:

{sap.ui.commons.enums.Orientation} sOrientation New value for property orientation

Returns:

{sap.ui.commons.Carousel} Reference to this in order to allow method chaining

setVisibleItems(iVisibleItems): sap.ui.commons.Carousel

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.

Parameters:

{int} iVisibleItems New value for property visibleItems

Returns:

{sap.ui.commons.Carousel} Reference to this in order to allow method chaining

setWidth(sWidth): sap.ui.commons.Carousel

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.

Parameters:

{sap.ui.core.CSSSize} sWidth New value for property width

Returns:

{sap.ui.commons.Carousel} Reference to this in order to allow method chaining

showElementWithId(sElementId)

Shows the element with the specified Id. This can be only used after the component is rendered.

Parameters:

{string}

sElementId

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(): sap.ui.commons.Carousel

Unbinds aggregation content from model data.

Returns:

{sap.ui.commons.Carousel} Reference to this in order to allow method chaining