Carousel — Smart UI JavaScript API

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

smart-carousel

Quick picks

changedataSourcedisabled

Properties

AanimationSpecifies 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.
AautoPlayWhen 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.
DdataSourceThis 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.
DdelaySpecifies 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.
DdisabledDetermines 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.
DdisableItemClick"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."
DdisplayModeSpecifies 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.
HhideArrowsConceals the navigation buttons from the user interface, making them invisible and inaccessible to the user.
HhideIndicatorsHides 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.
IindicatorTemplateAllows 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.
IintervalSpecifies 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.
IitemTemplateThis 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.
KkeyboardEnables 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.
LlocaleSpecifies 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.
LlocalizeFormatFunctionCallback 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.
LloopControls 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.
MmessagesConfigures 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.
RreadonlyWhen 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.
RrightToLeftGets 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.
SslideShowWhen 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.
SswipeAllows 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.
TthemeSpecifies 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.
UunfocusableWhen 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.
UunlockKeySets 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.
WwheelEnables 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).

Events

CchangeTriggered 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).
CchangingTriggered 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.
SswipeleftThis 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.
SswiperightThis 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.

Methods

NnextAdvances the presentation by transitioning to the next slide in the sequence, updating the display to show the subsequent slide content.
PpausePauses the slideshow when the slideShow option is enabled, temporarily stopping the automatic progression of slides until resumed.
PplayInitiates the slide show playback when the slideShow option is set to true. This will automatically cycle through the slides according to the configured settings.
PprevAdvances the slideshow to display the previous slide in the sequence, allowing users to review content shown earlier.
SslideToNavigates 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.

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

false
Try a demo showcasing the autoPlay property.

Examples

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.

Try a demo showcasing the dataSource property.

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

200

Examples

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

false

Examples

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

false

Examples

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

false
Try a demo showcasing the hideArrows property.

Examples

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

false
Try a demo showcasing the hideIndicators property.

Examples

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.

Try a demo showcasing the indicatorTemplate property.

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

5000
Try a demo showcasing the interval property.

Examples

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.

Try a demo showcasing the itemTemplate property.

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

false
Try a demo showcasing the keyboard property.

Examples

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

false
Try a demo showcasing the loop property.

Examples

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

false

Examples

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

false
Try a demo showcasing the rightToLeft property.

Examples

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

false
Try a demo showcasing the slideShow property.

Examples

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

false
Try a demo showcasing the swipe property.

Examples

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

false

Examples

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

false
Try a demo showcasing the wheel property.

Examples

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.

Try a demo showcasing the change event.

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