Other
Slider
Toggle

Accessibility

This components follows A11y standards so aria attributes and keyboard interactions are managed automatically.

SyntaxDefault / ArgumentsDescription
Optiona11y:Object|false<Object>Aria options
Optiona11y.role:String|false'carousel'Inject role and related attributes, can be 'popup', 'dialog', 'tooltip', 'carousel', also if has container and targets and no divs between 'tablist', 'menu', 'listbox'
Optiona11y.labelElements:BooleanfalseInject aria-labelledby attributes on elements (linking to targets)
Optiona11y.labelTargets:BooleantrueInject aria-labelledby attributes on targets (linking to elements)
Optiona11y.controls:BooleantrueInject aria-controls attributes
Optiona11y.selected:BooleanfalseInject aria-selected attributes
Optiona11y.expanded:BooleanfalseInject aria-expanded attributes
Optiona11y.live:BooleantrueInject aria-live attributes on auto
Optiona11y.disabled:BooleantrueInject aria-disabled attributes on enable/disable
Optiona11y.keyboard:BooleantrueAutomatic keyboard next, previous and exit interactions
Optiona11y.vertical:BooleanfalseVertical arrows instead of horizontal for keyboard events
Optiona11y.items:String|falsefalseNavigate activated target with arrows and search when typing

Do not rely/use aria attributes, they are generated and they can change anytime.

Disabled and Nested

If you want to disable the component use the options.disabled.

On slider disable/enable the component automatically add/remove the class hidden to all elements selected with hideDisable:Query.

SyntaxDefault / ArgumentsDescription
Optiondisabled:BooleanfalseDisable the component
OptiondisableDeactivate:BooleanfalseDeactivate automatically on disable and destroy
OptionhideDisable:Query'[data-xt-slider-pagination], [data-xt-nav], [data-xt-slider-hide-disabled]'Container query for items to hide on disable

With nested selectors change the elements and targets query.

Example of component disabled on desktop with match media.

Match Media

You can add additional options that gets added on match media query. You can use different queries with different and nested options.

SyntaxDefault / ArgumentsDescription
Optionmatches:ObjectfalseAdd additional options on match media query

Nooverflow

The component automatically disable and apply classes to dragger when the slides do not overflow the dragger. Use nooverflow: false to disable this behaviour.

SyntaxDefault / ArgumentsDescription
Optionnooverflow:String|false'!transform-none justify-center'Classes applied to dragger when the slides do not overflow the dragger

Expand

Disable and style expand. (use narrow screen to see it in action).

Touch Overflow

Disable and style touch overflow. (use touch device to see it in action).

Media loaded

If you want to animate on image loaded, with mediaLoaded: true use the class .xt-medialoaded or the js event medialoaded.xt.slider.

When you need to reinit the component when the media is loaded and the width of the image is calculated with mediaLoadedReinit: true.

SyntaxDefault / ArgumentsDescription
OptionmediaLoaded:BooleanfalseAdd the class .xt-medialoaded on img loaded
OptionmediaLoadedReinit:BooleanfalseReinit the component on img loaded after Xt.medialoadedDelay

This demos use loader see documentation for more info.

Zindex

On sequential activation you can automatically set zIndex of activated elements and targets.

It's better to keep the start value like the css one, but you can change the factor on activation.

SyntaxDefault / ArgumentsDescription
OptionzIndex:Object|false{ targets: { start: 200, factor: -1 } }Set z-index on activation, can be elements, targets, elementsInner, targetsInner

Other

SyntaxDefault / ArgumentsDescription
Optiondebug:BooleanfalseDebug on console
OptionvisibleReinit:BooleantrueReinit when self.container becomes visible with display only one time and only if not already visible