Carousel
Carousel is a slideshow component for cycling through elements—images or slides of text
Selector
smart-carousel
Properties
animationAnimation
Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
Default valueadvanced
autoPlayany
The items switch automatically if set to true or to a custom number(representing the timeout in milliseconds). This property works if slideShow property is enabled.
Default valuefalse
dataSourceany[]
An array of objects. Each object defines an item. The following object properties are available:
- label - a string representing the label of the item.
- content - a string representing the content of the item
- image - a string representing a url link to an image.
- HTMLcontent - a string representing some HTML structure taht will be generated inside the item.
delaynumber
Specifies the timeout before a slide changes when a navigation button is pressed. Navigation buttons are repeat buttons that will repeat the oepration after the delay is passed.
Default value200
disabledboolean
Enables or disables the element.
Default valuefalse
disableItemClickboolean
Disabled the possibility to navigated to an item by clicking on item in displayMode 3d. By default users can navigate to items that are not currently active by clicking on them.
Default valuefalse
displayModeCarouselDisplayMode
Determines the display mode.
Default valuedefault
hideArrowsboolean
Hides the navigation buttons.
Default valuefalse
hideIndicatorsboolean
Hides the slide indication panel that shows which item is currently in view (active item).
Default valuefalse
indicatorTemplateany
Can be used to customize the slide indicator panel of the accordion. The property can be a string that represents the id of an HTMLTemplateElement in the DOM or it's direct reference.
intervalnumber
Determines the interval (in milliseconds) between a slide transitions when slideShow is enabled.
Default value5000
itemTemplateany
Used to completely customize the content of an item. The property can be a string that represents the id of an HTMLTemplateElement in the DOM or it's direct reference. The content of the template can contain property bindings that refer to the dataSource.
keyboardboolean
Activates/deactivates keyboard navigation. By default, items can not be navigated via keyboard
Default valuefalse
localestring
Sets or gets the language. Used in conjunction with the property messages.
Default value"en
localizeFormatFunctionany
Callback used to customize the format of the messages that are returned from the Localization Module.
loopboolean
Determines whether the the items should start over when the first or last item is reached.
Default valuefalse
messagesany
Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
Default value
"en": {
"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",
"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",
"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",
"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
"moduleUndefined": "Module is undefined.",
"missingReference": "{{elementType}}: Missing reference to {{files}}.",
"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",
"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."
}
readonlyboolean
If the element is readonly, users cannot interact with it.
Default valuefalse
rightToLeftboolean
Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
Default valuefalse
slideShowboolean
When slideShow property is set to true, the carousel changes the active slide automatically with a delay set in interval property.
Default valuefalse
swipeboolean
Enables or disables switching to the previous/next slide via swiping left/right. By default swiping is disabled.
Default valuefalse
themestring
Determines the theme. Theme defines the look of the element
Default value"
unfocusableboolean
If is set to true, the element cannot be focused.
Default valuefalse
wheelboolean
Activates/deactivates slide navigation via mouse wheel. By default it's disabled.
Default valuefalse
onchange((this: Window, ev: Event) => any) | null
Triggered when the active ( in view ) slide is changed.
Arguments
evEvent
ev.detailObject
ev.detail.index - The index of the new active slide.
ev.detail.previousIndex - The index of the previous slide that was active.
onchanging((this: Window, ev: Event) => any) | null
Triggered when the process of slide changing starts.
Arguments
evEvent
ev.detailObject
ev.detail.index - The index of the new active slide.
ev.detail.previousIndex - The index of the previous slide that was active.
Methods
next(): void
Navigates to the next slide.
pause(): void
Pauses the slide show if slideShow is enabled.
play(): void
Starts the slide show if slideShow is enabled.
prev(): void
Navigates to the previous slide.
slideTo( index: number): void
Navigates to a specific slide with the given index.
Arguments
indexnumber
The index of the target slide.