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|falsefalseInject 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:BooleantrueInject 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.

SyntaxDefault / ArgumentsDescription
Optiondisabled:BooleanfalseDisable the component
OptiondisableDeactivate:BooleanfalseDeactivate automatically on disable and destroy

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

Media loaded

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

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

See slider media loaded for demo.

Reset to Current

Use this code to create a toggle that resets to current automatically on deactivation.

Append To

You can automatically move targets on activation inside the DOM.

SyntaxDefault / ArgumentsDescription
OptionappendTo:QueryfalseAutomatically append targets to Node on activation

Focus Limit

For accessibility purpose on activation you can limit the focus inside the current activated targets.

SyntaxDefault / ArgumentsDescription
OptionfocusLimit:BooleanfalseAutomatically limit focus on activation inside current targets
OptionfocusTrap:Object{ initialFocus: false, preventScroll: true, allowOutsideClick: true }Options to pass to Focus Trap


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|falsefalseSet z-index on activation, e.g.: { targets: { start: 600, factor: -1 } }, can be elements, targets, elementsInner, targetsInner


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