Carousel JAVASCRIPT UI Component API

Carousel Javascript API

Class

Carousel

Carousel is a slideshow component for cycling through elements—images or slides of text

smart-carousel

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

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

Example

Set the animation property. 

 <smart-carousel animation='none'></smart-carousel>

Set the animation property by using the HTML Element's instance. 

 const carousel = document.querySelector('smart-carousel');
 carousel.animation = 'simple';

Get the animation property. 

 const carousel = document.querySelector('smart-carousel');
 let animation = carousel.animation;

autoPlayboolean

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.

Example

Set the autoPlay property. 

 <smart-carousel auto-play></smart-carousel>

Set the autoPlay property by using the HTML Element's instance. 

 const carousel = document.querySelector('smart-carousel');
 carousel.autoPlay = 500;

Get the autoPlay property. 

 const carousel = document.querySelector('smart-carousel');
 let autoPlay = carousel.autoPlay;

dataSource[]

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.

Example

Set the dataSource property. 

 <smart-carousel data-source='[{ label: 'Slide 1', content: 'Some content'}, { label: 'Slide 2', image: '../../images/carousel-medium-1.jpg'}, { label: 'Slide 3'}]'></smart-carousel>

Set the dataSource property by using the HTML Element's instance. 

 const carousel = document.querySelector('smart-carousel');
 carousel.dataSource = [{ label: 'Slide 1', content: 'Content 1'}, { label: 'Slide 2', content: 'Content 2'}, { label: 'Slide 3', content: 'Content 3'}];

Get the dataSource property. 

 const carousel = document.querySelector('smart-carousel');
 let dataSource = carousel.dataSource;

delaynumber

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

Example

Set the delay property. 

 <smart-carousel delay='1000'></smart-carousel>

Set the delay property by using the HTML Element's instance. 

 const carousel = document.querySelector('smart-carousel');
 carousel.delay = 2000;

Get the delay property. 

 const carousel = document.querySelector('smart-carousel');
 let delay = carousel.delay;

disabledboolean

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

Example

Set the disabled property. 

 <smart-carousel disabled></smart-carousel>

Set the disabled property by using the HTML Element's instance. 

 const carousel = document.querySelector('smart-carousel');
 carousel.disabled = false;

Get the disabled property. 

 const carousel = document.querySelector('smart-carousel');
 let disabled = carousel.disabled;

disableItemClickboolean



"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

Example

Set the disableItemClick property. 

 <smart-carousel disable-item-click></smart-carousel>

Set the disableItemClick property by using the HTML Element's instance. 

 const carousel = document.querySelector('smart-carousel');
 carousel.disableItemClick = false;

Get the disableItemClick property. 

 const carousel = document.querySelector('smart-carousel');
 let disableItemClick = carousel.disableItemClick;

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

Example

Set the displayMode property. 

 <smart-carousel display-mode='multiple'></smart-carousel>

Set the displayMode property by using the HTML Element's instance. 

 const carousel = document.querySelector('smart-carousel');
 carousel.displayMode = '3d';

Get the displayMode property. 

 const carousel = document.querySelector('smart-carousel');
 let displayMode = carousel.displayMode;

hideArrowsboolean

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.

Example

Set the hideArrows property. 

 <smart-carousel hide-arrows></smart-carousel>

Set the hideArrows property by using the HTML Element's instance. 

 const carousel = document.querySelector('smart-carousel');
 carousel.hideArrows = false;

Get the hideArrows property. 

 const carousel = document.querySelector('smart-carousel');
 let hideArrows = carousel.hideArrows;

hideIndicatorsboolean

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.

Example

Set the hideIndicators property. 

 <smart-carousel hide-indicators></smart-carousel>

Set the hideIndicators property by using the HTML Element's instance. 

 const carousel = document.querySelector('smart-carousel');
 carousel.hideIndicators = false;

Get the hideIndicators property. 

 const carousel = document.querySelector('smart-carousel');
 let hideIndicators = carousel.hideIndicators;

indicatorTemplateany

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.

Example

Set the indicatorTemplate property. 

 <smart-carousel indicator-template='templateId1'></smart-carousel>

Set the indicatorTemplate property by using the HTML Element's instance. 

 const carousel = document.querySelector('smart-carousel');
 carousel.indicatorTemplate = templateId2;

Get the indicatorTemplate property. 

 const carousel = document.querySelector('smart-carousel');
 let indicatorTemplate = carousel.indicatorTemplate;

intervalnumber

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.

Example

Set the interval property. 

 <smart-carousel interval='1000'></smart-carousel>

Set the interval property by using the HTML Element's instance. 

 const carousel = document.querySelector('smart-carousel');
 carousel.interval = 2000;

Get the interval property. 

 const carousel = document.querySelector('smart-carousel');
 let interval = carousel.interval;

itemTemplateany

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.

Example

Set the itemTemplate property. 

 <smart-carousel item-template='templateId1'></smart-carousel>

Set the itemTemplate property by using the HTML Element's instance. 

 const carousel = document.querySelector('smart-carousel');
 carousel.itemTemplate = templateId2;

Get the itemTemplate property. 

 const carousel = document.querySelector('smart-carousel');
 let itemTemplate = carousel.itemTemplate;

keyboardboolean

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.

Example

Set the keyboard property. 

 <smart-carousel keyboard></smart-carousel>

Set the keyboard property by using the HTML Element's instance. 

 const carousel = document.querySelector('smart-carousel');
 carousel.keyboard = false;

Get the keyboard property. 

 const carousel = document.querySelector('smart-carousel');
 let keyboard = carousel.keyboard;

unlockKeystring

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

""

Example

Set the unlockKey property. 

 <smart-carousel unlock-key=''></smart-carousel>

Set the unlockKey property by using the HTML Element's instance. 

 const carousel = document.querySelector('smart-carousel');
 carousel.unlockKey = '1111-2222-3333-4444-5555';

Get the unlockKey property. 

 const carousel = document.querySelector('smart-carousel');
 let unlockKey = carousel.unlockKey;

localestring

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"

Example

Set the locale property. 

 <smart-carousel locale='de'></smart-carousel>

Set the locale property by using the HTML Element's instance. 

 const carousel = document.querySelector('smart-carousel');
 carousel.locale = 'fr';

Get the locale property. 

 const carousel = document.querySelector('smart-carousel');
 let locale = carousel.locale;

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

Example

Set the localizeFormatFunction property. 

 <smart-carousel localize-format-function='function(defaultMessage, message, messageArguments){return '...'}'></smart-carousel>

Set the localizeFormatFunction property by using the HTML Element's instance. 

 const carousel = document.querySelector('smart-carousel');
 carousel.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

Get the localizeFormatFunction property. 

 const carousel = document.querySelector('smart-carousel');
 let localizeFormatFunction = carousel.localizeFormatFunction;

loopboolean

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.

Example

Set the loop property. 

 <smart-carousel loop></smart-carousel>

Set the loop property by using the HTML Element's instance. 

 const carousel = document.querySelector('smart-carousel');
 carousel.loop = false;

Get the loop property. 

 const carousel = document.querySelector('smart-carousel');
 let loop = carousel.loop;

messagesobject

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

}

Example

Set the messages property. 

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

Set the messages property by using the HTML Element's instance. 

 const carousel = document.querySelector('smart-carousel');
 carousel.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."}};

Get the messages property. 

 const carousel = document.querySelector('smart-carousel');
 let messages = carousel.messages;

readonlyboolean

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

Example

Set the readonly property. 

 <smart-carousel readonly></smart-carousel>

Set the readonly property by using the HTML Element's instance. 

 const carousel = document.querySelector('smart-carousel');
 carousel.readonly = true;

Get the readonly property. 

 const carousel = document.querySelector('smart-carousel');
 let readonly = carousel.readonly;

rightToLeftboolean

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.

Example

Set the rightToLeft property. 

 <smart-carousel right-to-left></smart-carousel>

Set the rightToLeft property by using the HTML Element's instance. 

 const carousel = document.querySelector('smart-carousel');
 carousel.rightToLeft = true;

Get the rightToLeft property. 

 const carousel = document.querySelector('smart-carousel');
 let rightToLeft = carousel.rightToLeft;

slideShowboolean

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.

Example

Set the slideShow property. 

 <smart-carousel slide-show></smart-carousel>

Set the slideShow property by using the HTML Element's instance. 

 const carousel = document.querySelector('smart-carousel');
 carousel.slideShow = false;

Get the slideShow property. 

 const carousel = document.querySelector('smart-carousel');
 let slideShow = carousel.slideShow;

swipeboolean

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.

Example

Set the swipe property. 

 <smart-carousel swipe></smart-carousel>

Set the swipe property by using the HTML Element's instance. 

 const carousel = document.querySelector('smart-carousel');
 carousel.swipe = false;

Get the swipe property. 

 const carousel = document.querySelector('smart-carousel');
 let swipe = carousel.swipe;

themestring

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

""

Example

Set the theme property. 

 <smart-carousel theme='blue'></smart-carousel>

Set the theme property by using the HTML Element's instance. 

 const carousel = document.querySelector('smart-carousel');
 carousel.theme = 'red';

Get the theme property. 

 const carousel = document.querySelector('smart-carousel');
 let theme = carousel.theme;

unfocusableboolean

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

Example

Set the unfocusable property. 

 <smart-carousel unfocusable></smart-carousel>

Set the unfocusable property by using the HTML Element's instance. 

 const carousel = document.querySelector('smart-carousel');
 carousel.unfocusable = false;

Get the unfocusable property. 

 const carousel = document.querySelector('smart-carousel');
 let unfocusable = carousel.unfocusable;

wheelboolean

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.

Example

Set the wheel property. 

 <smart-carousel wheel></smart-carousel>

Set the wheel property by using the HTML Element's instance. 

 const carousel = document.querySelector('smart-carousel');
 carousel.wheel = false;

Get the wheel property. 

 const carousel = document.querySelector('smart-carousel');
 let wheel = carousel.wheel;

Events

changeCustomEvent

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.

Example

Set up the event handler of change event. 

const carousel = document.querySelector('smart-carousel');
carousel.addEventListener('change', function (event) {
    const detail = event.detail,
        index = detail.index,
        previousIndex = detail.previousIndex;

	// event handling code goes here.
})

changingCustomEvent

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.

Example

Set up the event handler of changing event. 

const carousel = document.querySelector('smart-carousel');
carousel.addEventListener('changing', function (event) {
    const detail = event.detail,
        index = detail.index,
        previousIndex = detail.previousIndex;

	// event handling code goes here.
})

swipeleftCustomEvent

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.

Example

Set up the event handler of swipeleft event. 

const carousel = document.querySelector('smart-carousel');
carousel.addEventListener('swipeleft', function (event) {
	// event handling code goes here.
})

swiperightCustomEvent

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.

Example

Set up the event handler of swiperight event. 

const carousel = document.querySelector('smart-carousel');
carousel.addEventListener('swiperight', function (event) {
	// event handling code goes here.
})

Methods

next(): void

Advances the presentation by transitioning to the next slide in the sequence, updating the display to show the subsequent slide content.


Invoke the next method.

const carousel = document.querySelector('smart-carousel');
carousel.next("");

Try a demo showcasing the next method.

pause(): void

Pauses the slideshow when the slideShow option is enabled, temporarily stopping the automatic progression of slides until resumed.


Invoke the pause method.

const carousel = document.querySelector('smart-carousel');
carousel.pause("");

Try a demo showcasing the pause method.

play(): void

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.


Invoke the play method.

const carousel = document.querySelector('smart-carousel');
carousel.play("");

Try a demo showcasing the play method.

prev(): void

Advances the slideshow to display the previous slide in the sequence, allowing users to review content shown earlier.


Invoke the prev method.

const carousel = document.querySelector('smart-carousel');
carousel.prev("");

Try a demo showcasing the prev method.

slideTo( index: number): void

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.


Invoke the slideTo method.

const carousel = document.querySelector('smart-carousel');
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