Carousel — Smart UI JavaScript API
On this page + Quick start
Quick start · JavaScript
Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Carousel - JavaScript Quick Start</title>
<link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
<smart-carousel id="demo-carousel"></smart-carousel>
<script type="module">
import './node_modules/smart-webcomponents/source/modules/smart.carousel.js';
const el = document.getElementById('demo-carousel');
if (el) {
el.autoPlay = true;
el.slideShow = true;
el.dataSource = [
{ image: 'https://via.placeholder.com/800x300/4f46e5/ffffff?text=Slide+1', label: 'Overview' },
{ image: 'https://via.placeholder.com/800x300/0891b2/ffffff?text=Slide+2', label: 'Details' },
{ image: 'https://via.placeholder.com/800x300/16a34a/ffffff?text=Slide+3', label: 'Summary' }
];
el.addEventListener('change', (event) => console.log('change:', event.detail || event));
}
</script>
</body>
</html>
For AI tooling
Developer Quick Reference
Component: Carousel Framework: JavaScript Selector: smart-carousel
API counts: 25 properties, 5 methods, 4 events
Common properties: 0, 1, 2, 3, 4, 5
Common methods: next(), pause(), play(), prev(), slideTo()
Common events: change, changing, swipeleft, swiperight
Module hint: smart-webcomponents/source/modules/smart.carousel.js
Carousel is a slideshow component for cycling through elements—images or slides of text
Class
Carousel
Carousel is a slideshow component for cycling through elements—images or slides of text
Selector
smart-carousel
Quick picks
Properties
true, the carousel automatically transitions to the next slide without requiring user interaction. The duration between each automatic slide change is determined by the value of the interval property, which specifies the delay in milliseconds between transitions.Events
Methods
true. This will automatically cycle through the slides according to the configured settings.Properties
animationSpecifies or retrieves the current animation mode. When the property is set to 'none', all animations are disabled. Otherwise, the specified value determines how animations are applied to the element."none" | "simple" | "advanced"
Specifies or retrieves the current animation mode. When the property is set to 'none', all animations are disabled. Otherwise, the specified value determines how animations are applied to the element.
Allowed Values
- "none" - animation is disabled
- "simple" - ripple animation is disabled
- "advanced" - all animations are enabled
Default value
"advanced"Examples
Markup and runtime examples for animation:
HTML:
<smart-carousel animation="none"></smart-carousel>
Vanilla JS — prefer #id if multiple widgets exist on the page:
const el = document.querySelector('smart-carousel');
el.animation = "simple";Read the current value:
const el = document.querySelector('smart-carousel');
const animation = el.animation;
autoPlayWhen this property is set to true, items will automatically switch at a default interval. If set to a specific number, it defines the custom timeout duration in milliseconds between each automatic switch. Note: This property only takes effect if the slideShow property is enabled.boolean
When this property is set to true, items will automatically switch at a default interval. If set to a specific number, it defines the custom timeout duration in milliseconds between each automatic switch. Note: This property only takes effect if the slideShow property is enabled.
Default value
falseExamples
Markup and runtime examples for autoPlay:
HTML attribute:
<smart-carousel auto-play></smart-carousel>
Vanilla JS — prefer #id if multiple widgets exist on the page:
const el = document.querySelector('smart-carousel');
el.autoPlay = 500;Read the current value:
const el = document.querySelector('smart-carousel');
const autoPlay = el.autoPlay;
dataSourceThis JSON file contains an array of objects, with each object representing a single item. Each item object supports the following properties: label: A string that specifies the display name or title of the item. content: A string containing the main textual content or description associated with the item. image: A string containing the URL of an image that visually represents or is related to the item. HTMLcontent: A string containing HTML markup to be rendered as part of the item's content. This allows for custom formatting or the inclusion of HTML elements within the item.All properties are optional unless otherwise noted, and can be combined as needed for each item. This structure is designed to provide flexibility for displaying rich, media-enhanced content in dynamic web interfaces. []
This JSON file contains an array of objects, with each object representing a single item. Each item object supports the following properties:
label: A string that specifies the display name or title of the item.
content: A string containing the main textual content or description associated with the item.
image: A string containing the URL of an image that visually represents or is related to the item.
HTMLcontent: A string containing HTML markup to be rendered as part of the item's content. This allows for custom formatting or the inclusion of HTML elements within the item.
All properties are optional unless otherwise noted, and can be combined as needed for each item. This structure is designed to provide flexibility for displaying rich, media-enhanced content in dynamic web interfaces.
Examples
Markup and runtime examples for dataSource:
HTML:
<smart-carousel data-source="[{ label: 'Slide 1', content: 'Some content'}, { label: 'Slide 2', image: '../../images/carousel-medium-1.jpg'}, { label: 'Slide 3'}]"></smart-carousel>Vanilla JS — prefer #id if multiple widgets exist on the page:
const el = document.querySelector('smart-carousel');
el.dataSource = [{ label: 'Slide 1', content: 'Content 1'}, { label: 'Slide 2', content: 'Content 2'}, { label: 'Slide 3', content: 'Content 3'}];Read the current value:
const el = document.querySelector('smart-carousel');
const dataSource = el.dataSource;
delaySpecifies the delay, in milliseconds, before transitioning to the next or previous slide after a navigation button is pressed. Navigation buttons function as repeat buttons: if the button is held down, the slide change operation will automatically repeat at this interval after the initial delay, allowing continuous navigation through the slides.number
Specifies the delay, in milliseconds, before transitioning to the next or previous slide after a navigation button is pressed. Navigation buttons function as repeat buttons: if the button is held down, the slide change operation will automatically repeat at this interval after the initial delay, allowing continuous navigation through the slides.
Default value
200Examples
Markup and runtime examples for delay:
HTML:
<smart-carousel delay="1000"></smart-carousel>
Vanilla JS — prefer #id if multiple widgets exist on the page:
const el = document.querySelector('smart-carousel');
el.delay = 2000;Read the current value:
const el = document.querySelector('smart-carousel');
const delay = el.delay;
disabledDetermines whether the element is interactive and can be used by the user. If enabled, the element is active and accepts input or actions. If disabled, the element is inactive, typically appears visually distinct (e.g., grayed out), and does not respond to user interactions.boolean
Determines whether the element is interactive and can be used by the user. If enabled, the element is active and accepts input or actions. If disabled, the element is inactive, typically appears visually distinct (e.g., grayed out), and does not respond to user interactions.
Default value
falseExamples
Markup and runtime examples for disabled:
HTML attribute:
<smart-carousel disabled></smart-carousel>
Vanilla JS — prefer #id if multiple widgets exist on the page:
const el = document.querySelector('smart-carousel');
el.disabled = false;Read the current value:
const el = document.querySelector('smart-carousel');
const disabled = el.disabled;
disableItemClick"Disabled the ability for users to navigate to an item by clicking on it when displayMode is set to 3d. By default, users can click on non-active items to navigate to them, but this behavior is now prevented in 3d mode."boolean
"Disabled the ability for users to navigate to an item by clicking on it when displayMode is set to 3d. By default, users can click on non-active items to navigate to them, but this behavior is now prevented in 3d mode."
Default value
falseExamples
Markup and runtime examples for disableItemClick:
HTML attribute:
<smart-carousel disable-item-click></smart-carousel>
Vanilla JS — prefer #id if multiple widgets exist on the page:
const el = document.querySelector('smart-carousel');
el.disableItemClick = false;Read the current value:
const el = document.querySelector('smart-carousel');
const disableItemClick = el.disableItemClick;
displayModeSpecifies how the content is visually presented to the user by selecting the appropriate display mode (e.g., fullscreen, minimal-ui, standalone, or browser). This controls the appearance and user interface elements shown when the application or page is loaded."default" | "multiple" | "3d"
Specifies how the content is visually presented to the user by selecting the appropriate display mode (e.g., fullscreen, minimal-ui, standalone, or browser). This controls the appearance and user interface elements shown when the application or page is loaded.
Allowed Values
- "default" - The items are presented as 2D slides.
- "multiple" - Multiple items are presented on each slide as 2D slides.
- "3d" - Items are displayed in 3D perspective where each item has it's own slide.
Default value
"default"Examples
Markup and runtime examples for displayMode:
HTML:
<smart-carousel display-mode="multiple"></smart-carousel>
Vanilla JS — prefer #id if multiple widgets exist on the page:
const el = document.querySelector('smart-carousel');
el.displayMode = "3d";Read the current value:
const el = document.querySelector('smart-carousel');
const displayMode = el.displayMode;
hideArrowsConceals the navigation buttons from the user interface, making them invisible and inaccessible to the user.boolean
Conceals the navigation buttons from the user interface, making them invisible and inaccessible to the user.
Default value
falseExamples
Markup and runtime examples for hideArrows:
HTML attribute:
<smart-carousel hide-arrows></smart-carousel>
Vanilla JS — prefer #id if multiple widgets exist on the page:
const el = document.querySelector('smart-carousel');
el.hideArrows = false;Read the current value:
const el = document.querySelector('smart-carousel');
const hideArrows = el.hideArrows;
hideIndicatorsHides the slide indicator panel, which visually displays the current active item within a slideshow or carousel, helping users identify which slide they are viewing. When enabled, this option removes that indicator from view.boolean
Hides the slide indicator panel, which visually displays the current active item within a slideshow or carousel, helping users identify which slide they are viewing. When enabled, this option removes that indicator from view.
Default value
falseExamples
Markup and runtime examples for hideIndicators:
HTML attribute:
<smart-carousel hide-indicators></smart-carousel>
Vanilla JS — prefer #id if multiple widgets exist on the page:
const el = document.querySelector('smart-carousel');
el.hideIndicators = false;Read the current value:
const el = document.querySelector('smart-carousel');
const hideIndicators = el.hideIndicators;
indicatorTemplateAllows customization of the accordion’s slide indicator panel by specifying a template. This property accepts either a string—representing the ID of an HTMLTemplateElement present in the DOM—or a direct reference to the HTMLTemplateElement itself. Using this property, you can define a custom appearance and structure for the indicator panel within the accordion component.any
Allows customization of the accordion’s slide indicator panel by specifying a template. This property accepts either a string—representing the ID of an HTMLTemplateElement present in the DOM—or a direct reference to the HTMLTemplateElement itself. Using this property, you can define a custom appearance and structure for the indicator panel within the accordion component.
Examples
Markup and runtime examples for indicatorTemplate:
HTML:
<smart-carousel indicator-template="templateId1"></smart-carousel>
Vanilla JS — prefer #id if multiple widgets exist on the page:
const el = document.querySelector('smart-carousel');
el.indicatorTemplate = "templateId2";Read the current value:
const el = document.querySelector('smart-carousel');
const indicatorTemplate = el.indicatorTemplate;
intervalSpecifies the time interval, in milliseconds, between each automatic slide transition when the slideShow feature is enabled. This value controls how long each slide is displayed before moving to the next one during the slideshow.number
Specifies the time interval, in milliseconds, between each automatic slide transition when the slideShow feature is enabled. This value controls how long each slide is displayed before moving to the next one during the slideshow.
Default value
5000Examples
Markup and runtime examples for interval:
HTML:
<smart-carousel interval="1000"></smart-carousel>
Vanilla JS — prefer #id if multiple widgets exist on the page:
const el = document.querySelector('smart-carousel');
el.interval = 2000;Read the current value:
const el = document.querySelector('smart-carousel');
const interval = el.interval;
itemTemplateThis property allows full customization of an item's rendered content. It accepts either a string specifying the ID of an existing HTMLTemplateElement in the DOM, or a direct reference to such an element. The template's content can include property bindings, enabling dynamic data insertion from the associated dataSource. This makes it possible to define complex layouts and bind data-driven values for each item using standard template syntax.any
This property allows full customization of an item's rendered content. It accepts either a string specifying the ID of an existing HTMLTemplateElement in the DOM, or a direct reference to such an element. The template's content can include property bindings, enabling dynamic data insertion from the associated dataSource. This makes it possible to define complex layouts and bind data-driven values for each item using standard template syntax.
Examples
Markup and runtime examples for itemTemplate:
HTML:
<smart-carousel item-template="templateId1"></smart-carousel>
Vanilla JS — prefer #id if multiple widgets exist on the page:
const el = document.querySelector('smart-carousel');
el.itemTemplate = "templateId2";Read the current value:
const el = document.querySelector('smart-carousel');
const itemTemplate = el.itemTemplate;
keyboardEnables or disables keyboard navigation for the component. When set to true, users can navigate between items using keyboard controls (such as arrow keys). By default, keyboard navigation is disabled, meaning users cannot move between items using the keyboard unless this option is activated.boolean
Enables or disables keyboard navigation for the component. When set to true, users can navigate between items using keyboard controls (such as arrow keys). By default, keyboard navigation is disabled, meaning users cannot move between items using the keyboard unless this option is activated.
Default value
falseExamples
Markup and runtime examples for keyboard:
HTML attribute:
<smart-carousel keyboard></smart-carousel>
Vanilla JS — prefer #id if multiple widgets exist on the page:
const el = document.querySelector('smart-carousel');
el.keyboard = false;Read the current value:
const el = document.querySelector('smart-carousel');
const keyboard = el.keyboard;
localeSpecifies or retrieves the current language code (e.g., "en", "fr", "es") used for localization. This property works together with the messages property, determining which set of localized messages or translations should be applied based on the selected language.string
Specifies or retrieves the current language code (e.g., "en", "fr", "es") used for localization. This property works together with the messages property, determining which set of localized messages or translations should be applied based on the selected language.
Default value
"en"Examples
Markup and runtime examples for locale:
HTML:
<smart-carousel locale="de"></smart-carousel>
Vanilla JS — prefer #id if multiple widgets exist on the page:
const el = document.querySelector('smart-carousel');
el.locale = "fr";Read the current value:
const el = document.querySelector('smart-carousel');
const locale = el.locale;
localizeFormatFunctionCallback function that allows you to customize the formatting of messages returned by the Localization Module. Use this to modify, translate, or adjust message strings before they are delivered to the application, enabling more flexible localization and message presentation.function | null
Callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this to modify, translate, or adjust message strings before they are delivered to the application, enabling more flexible localization and message presentation.
Examples
Markup and runtime examples for localizeFormatFunction:
HTML:
<smart-carousel localize-format-function="function(defaultMessage, message, messageArguments){return '...'}"></smart-carousel>Vanilla JS — prefer #id if multiple widgets exist on the page:
const el = document.querySelector('smart-carousel');
el.localizeFormatFunction = "function(defaultMessage, message, messageArguments){return '...'}";Read the current value:
const el = document.querySelector('smart-carousel');
const localizeFormatFunction = el.localizeFormatFunction;
loopControls whether the item list loops continuously, restarting from the first item after reaching the last, or from the last item after reaching the first. If enabled, navigation wraps around instead of stopping at the end or beginning.boolean
Controls whether the item list loops continuously, restarting from the first item after reaching the last, or from the last item after reaching the first. If enabled, navigation wraps around instead of stopping at the end or beginning.
Default value
falseExamples
Markup and runtime examples for loop:
HTML attribute:
<smart-carousel loop></smart-carousel>
Vanilla JS — prefer #id if multiple widgets exist on the page:
const el = document.querySelector('smart-carousel');
el.loop = false;Read the current value:
const el = document.querySelector('smart-carousel');
const loop = el.loop;
messagesConfigures or retrieves an object containing localized strings used throughout the widget interface, such as labels, tooltips, and messages. This property works together with the locale property to support multiple languages, allowing developers to provide translations and customize text displayed to users based on their locale settings.object
Configures or retrieves an object containing localized strings used throughout the widget interface, such as labels, tooltips, and messages. This property works together with the locale property to support multiple languages, allowing developers to provide translations and customize text displayed to users based on their locale settings.
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."
}
Examples
Markup and runtime examples for messages:
HTML:
<smart-carousel messages="{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss."}}"></smart-carousel>Vanilla JS — prefer #id if multiple widgets exist on the page:
const el = document.querySelector('smart-carousel');
el.messages = {"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."}};Read the current value:
const el = document.querySelector('smart-carousel');
const messages = el.messages;
readonlyWhen an element is set to readonly, users can view its content but cannot modify, edit, or change its value. However, the element may still allow actions such as copying text, but any direct input, selection, or alteration by the user is disabled.boolean
When an element is set to readonly, users can view its content but cannot modify, edit, or change its value. However, the element may still allow actions such as copying text, but any direct input, selection, or alteration by the user is disabled.
Default value
falseExamples
Markup and runtime examples for readonly:
HTML attribute:
<smart-carousel readonly></smart-carousel>
Vanilla JS — prefer #id if multiple widgets exist on the page:
const el = document.querySelector('smart-carousel');
el.readonly = true;Read the current value:
const el = document.querySelector('smart-carousel');
const readonly = el.readonly;
rightToLeftGets or sets a value that determines whether the element's text alignment and layout are configured for right-to-left (RTL) languages, such as Arabic or Hebrew. This property ensures proper support for locales that use right-to-left reading order.boolean
Gets or sets a value that determines whether the element's text alignment and layout are configured for right-to-left (RTL) languages, such as Arabic or Hebrew. This property ensures proper support for locales that use right-to-left reading order.
Default value
falseExamples
Markup and runtime examples for rightToLeft:
HTML attribute:
<smart-carousel right-to-left></smart-carousel>
Vanilla JS — prefer #id if multiple widgets exist on the page:
const el = document.querySelector('smart-carousel');
el.rightToLeft = true;Read the current value:
const el = document.querySelector('smart-carousel');
const rightToLeft = el.rightToLeft;
slideShowWhen the slideShow property is set to true, the carousel automatically transitions to the next slide without requiring user interaction. The duration between each automatic slide change is determined by the value of the interval property, which specifies the delay in milliseconds between transitions.boolean
When the slideShow property is set to true, the carousel automatically transitions to the next slide without requiring user interaction. The duration between each automatic slide change is determined by the value of the interval property, which specifies the delay in milliseconds between transitions.
Default value
falseExamples
Markup and runtime examples for slideShow:
HTML attribute:
<smart-carousel slide-show></smart-carousel>
Vanilla JS — prefer #id if multiple widgets exist on the page:
const el = document.querySelector('smart-carousel');
el.slideShow = false;Read the current value:
const el = document.querySelector('smart-carousel');
const slideShow = el.slideShow;
swipeAllows users to navigate to the previous or next slide by swiping left or right on touch-enabled devices. When this option is enabled, swipe gestures will move between slides. By default, swipe navigation is disabled, so users will not be able to change slides using swipe gestures unless this setting is enabled.boolean
Allows users to navigate to the previous or next slide by swiping left or right on touch-enabled devices. When this option is enabled, swipe gestures will move between slides. By default, swipe navigation is disabled, so users will not be able to change slides using swipe gestures unless this setting is enabled.
Default value
falseExamples
Markup and runtime examples for swipe:
HTML attribute:
<smart-carousel swipe></smart-carousel>
Vanilla JS — prefer #id if multiple widgets exist on the page:
const el = document.querySelector('smart-carousel');
el.swipe = false;Read the current value:
const el = document.querySelector('smart-carousel');
const swipe = el.swipe;
themeSpecifies the theme to be applied to the element. The theme controls the overall appearance, including colors, fonts, and styles, ensuring a consistent visual design for the element throughout the application.string
Specifies the theme to be applied to the element. The theme controls the overall appearance, including colors, fonts, and styles, ensuring a consistent visual design for the element throughout the application.
Default value
""Examples
Markup and runtime examples for theme:
HTML:
<smart-carousel theme="blue"></smart-carousel>
Vanilla JS — prefer #id if multiple widgets exist on the page:
const el = document.querySelector('smart-carousel');
el.theme = "red";Read the current value:
const el = document.querySelector('smart-carousel');
const theme = el.theme;
unfocusableWhen set to true, this property prevents the element from receiving focus, meaning users will be unable to focus on the element using keyboard navigation (such as the Tab key) or by clicking it.boolean
When set to true, this property prevents the element from receiving focus, meaning users will be unable to focus on the element using keyboard navigation (such as the Tab key) or by clicking it.
Default value
falseExamples
Markup and runtime examples for unfocusable:
HTML attribute:
<smart-carousel unfocusable></smart-carousel>
Vanilla JS — prefer #id if multiple widgets exist on the page:
const el = document.querySelector('smart-carousel');
el.unfocusable = false;Read the current value:
const el = document.querySelector('smart-carousel');
const unfocusable = el.unfocusable;
unlockKeySets or retrieves the unlockKey, a unique identifier or code required to access or activate the product’s features. This property allows you to assign a new unlock key to enable product functionality or obtain the currently assigned unlock key for verification purposes.string
Sets or retrieves the unlockKey, a unique identifier or code required to access or activate the product’s features. This property allows you to assign a new unlock key to enable product functionality or obtain the currently assigned unlock key for verification purposes.
Default value
""Examples
Markup and runtime examples for unlockKey:
HTML:
<smart-carousel unlock-key=""></smart-carousel>
Vanilla JS — prefer #id if multiple widgets exist on the page:
const el = document.querySelector('smart-carousel');
el.unlockKey = "1111-2222-3333-4444-5555";Read the current value:
const el = document.querySelector('smart-carousel');
const unlockKey = el.unlockKey;
wheelEnables or disables the ability to navigate between slides using the mouse wheel. When set to true, users can switch slides by scrolling the mouse wheel. By default, this feature is turned off (disabled).boolean
Enables or disables the ability to navigate between slides using the mouse wheel. When set to true, users can switch slides by scrolling the mouse wheel. By default, this feature is turned off (disabled).
Default value
falseExamples
Markup and runtime examples for wheel:
HTML attribute:
<smart-carousel wheel></smart-carousel>
Vanilla JS — prefer #id if multiple widgets exist on the page:
const el = document.querySelector('smart-carousel');
el.wheel = false;Read the current value:
const el = document.querySelector('smart-carousel');
const wheel = el.wheel;
Events
changeTriggered whenever the currently visible slide in the carousel or slider component changes, indicating that a new slide has entered the viewport and become active. This event occurs both when users navigate manually (e.g., via next/previous buttons or swipe gestures) and when slides change automatically (e.g., through autoplay functionality).CustomEvent
Triggered whenever the currently visible slide in the carousel or slider component changes, indicating that a new slide has entered the viewport and become active. This event occurs both when users navigate manually (e.g., via next/previous buttons or swipe gestures) and when slides change automatically (e.g., through autoplay functionality).
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onChange
Arguments
evCustomEvent
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
isDefaultPrevented
Returns true if the event was prevented by any of its subscribers.
Returns
boolean true if the default action was prevented. Otherwise, returns false.
preventDefault
The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.
stopPropagation
The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.
Examples
Listen for change using the pattern that matches your stack.
DOM — listen on the custom element (use a specific selector if the page has more than one):
document.querySelector('smart-carousel')?.addEventListener('change', (event) => {
const detail = event.detail,
index = detail.index,
previousIndex = detail.previousIndex;
// event handling code goes here.
})
changingTriggered at the moment when the slide transition begins, indicating that the process of changing from the current slide to the next or previous slide has started. This event allows developers to execute custom actions right as the slide change is initiated, before the transition animation completes.CustomEvent
Triggered at the moment when the slide transition begins, indicating that the process of changing from the current slide to the next or previous slide has started. This event allows developers to execute custom actions right as the slide change is initiated, before the transition animation completes.
- Bubbles Yes
- Cancelable Yes
- Interface CustomEvent
- Event handler property onChanging
Arguments
evCustomEvent
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
isDefaultPrevented
Returns true if the event was prevented by any of its subscribers.
Returns
boolean true if the default action was prevented. Otherwise, returns false.
preventDefault
The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.
stopPropagation
The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.
Examples
Listen for changing using the pattern that matches your stack.
DOM — listen on the custom element (use a specific selector if the page has more than one):
document.querySelector('smart-carousel')?.addEventListener('changing', (event) => {
const detail = event.detail,
index = detail.index,
previousIndex = detail.previousIndex;
// event handling code goes here.
})
swipeleftThis event is triggered when the user performs a leftward swipe gesture within the Carousel component, typically indicating a request to navigate to the next item or slide in the sequence.CustomEvent
This event is triggered when the user performs a leftward swipe gesture within the Carousel component, typically indicating a request to navigate to the next item or slide in the sequence.
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onSwipeleft
Arguments
evCustomEvent
Methods
isDefaultPrevented
Returns true if the event was prevented by any of its subscribers.
Returns
boolean true if the default action was prevented. Otherwise, returns false.
preventDefault
The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.
stopPropagation
The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.
Examples
Listen for swipeleft using the pattern that matches your stack.
DOM — listen on the custom element (use a specific selector if the page has more than one):
document.querySelector('smart-carousel')?.addEventListener('swipeleft', (event) => {
// event handling code goes here.
})
swiperightThis event is triggered when the user performs a rightward swipe gesture within the Carousel component, typically indicating a request to navigate to the previous item. It allows you to execute custom logic in response to user interactions such as navigating through Carousel slides by swiping right.CustomEvent
This event is triggered when the user performs a rightward swipe gesture within the Carousel component, typically indicating a request to navigate to the previous item. It allows you to execute custom logic in response to user interactions such as navigating through Carousel slides by swiping right.
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onSwiperight
Arguments
evCustomEvent
Methods
isDefaultPrevented
Returns true if the event was prevented by any of its subscribers.
Returns
boolean true if the default action was prevented. Otherwise, returns false.
preventDefault
The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.
stopPropagation
The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.
Examples
Listen for swiperight using the pattern that matches your stack.
DOM — listen on the custom element (use a specific selector if the page has more than one):
document.querySelector('smart-carousel')?.addEventListener('swiperight', (event) => {
// event handling code goes here.
})
Methods
next(): voidAdvances the presentation by transitioning to the next slide in the sequence, updating the display to show the subsequent slide content.
Advances the presentation by transitioning to the next slide in the sequence, updating the display to show the subsequent slide content.
On the custom element in the DOM (narrow the selector, e.g. to #my-carousel, if you host multiple widgets):
document.querySelector('smart-carousel')?.next("");
Try a demo showcasing the next method.
pause(): voidPauses the slideshow when the slideShow option is enabled, temporarily stopping the automatic progression of slides until resumed.
Pauses the slideshow when the slideShow option is enabled, temporarily stopping the automatic progression of slides until resumed.
On the custom element in the DOM (narrow the selector, e.g. to #my-carousel, if you host multiple widgets):
document.querySelector('smart-carousel')?.pause("");
Try a demo showcasing the pause method.
play(): voidInitiates the slide show playback when the slideShow option is set to true. This will automatically cycle through the slides according to the configured settings.
Initiates the slide show playback when the slideShow option is set to true. This will automatically cycle through the slides according to the configured settings.
On the custom element in the DOM (narrow the selector, e.g. to #my-carousel, if you host multiple widgets):
document.querySelector('smart-carousel')?.play("");
Try a demo showcasing the play method.
prev(): voidAdvances the slideshow to display the previous slide in the sequence, allowing users to review content shown earlier.
Advances the slideshow to display the previous slide in the sequence, allowing users to review content shown earlier.
On the custom element in the DOM (narrow the selector, e.g. to #my-carousel, if you host multiple widgets):
document.querySelector('smart-carousel')?.prev("");
Try a demo showcasing the prev method.
slideTo( index: number): voidNavigates to a specific slide within the presentation or carousel by using the provided slide index. The index should correspond to the zero-based position of the desired slide.
Navigates to a specific slide within the presentation or carousel by using the provided slide index. The index should correspond to the zero-based position of the desired slide.
Arguments
indexnumber
The index of the target slide.
On the custom element in the DOM (narrow the selector, e.g. to #my-carousel, if you host multiple widgets):
document.querySelector('smart-carousel')?.slideTo("3");
Try a demo showcasing the slideTo method.
CSS Variables
--smart-carousel-default-widthvar()
Default value
"600px"default width of the element
--smart-carousel-default-heightvar()
Default value
"200px"default height of the element
--smart-carousel-3d-mode-slide-widthvar()
Default value
"400px"default width of a slide in 3d mode
--smart-carousel-3d-mode-slide-heightvar()
Default value
"400px"default height of a slide in 3d mode
--smart-carousel-multiple-mode-slide-widthvar()
Default value
"200px"default width of a slide in multiple mode