Intersection Observer performances
The slider component automatically hides slides outside of the window, and shows them when they enter the window, all of this with Xt.observe. This improves the performances of sliders especially when they have many or complex slides and especially on slow mobiles.
To disable this behaviour use options.noobserver: true.
| Syntax | Default / Arguments | Description | |
|---|---|---|---|
| Option | noobserver:Boolean | false | Disable intersection observer performances |
Accessibility
This components follows A11y standards so aria attributes and keyboard interactions are managed automatically.
| Syntax | Default / Arguments | Description | |
|---|---|---|---|
| Option | a11y:Object|false | <Object> | Aria options |
| Option | a11y.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' |
| Option | a11y.labelElements:Boolean | false | Inject aria-labelledby attributes on elements (linking to targets) |
| Option | a11y.labelTargets:Boolean | true | Inject aria-labelledby attributes on targets (linking to elements) |
| Option | a11y.controls:Boolean | true | Inject aria-controls attributes |
| Option | a11y.selected:Boolean | false | Inject aria-selected attributes |
| Option | a11y.expanded:Boolean | false | Inject aria-expanded attributes |
| Option | a11y.live:Boolean | true | Inject aria-live attributes on auto |
| Option | a11y.disabled:Boolean | true | Inject aria-disabled attributes on enable/disable |
| Option | a11y.keyboard:Boolean | true | Automatic keyboard next, previous and exit interactions |
| Option | a11y.vertical:Boolean | false | Vertical arrows instead of horizontal for keyboard events |
| Option | a11y.items:String|false | false | Navigate 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.
| Syntax | Default / Arguments | Description | |
|---|---|---|---|
| Option | disabled:Boolean | false | Disable the component |
| Option | disableDeactivate:Boolean | false | Deactivate automatically on disable and destroy |
| Option | hideDisable: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.
| Syntax | Default / Arguments | Description | |
|---|---|---|---|
| Option | matches:Object | false | Add 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.
| Syntax | Default / Arguments | Description | |
|---|---|---|---|
| Option | nooverflow: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.
| Syntax | Default / Arguments | Description | |
|---|---|---|---|
| Option | mediaLoaded:Boolean | false | Add the class .xt-medialoaded on img loaded |
| Option | mediaLoadedReinit:Boolean | false | Reinit 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.
| Syntax | Default / Arguments | Description | |
|---|---|---|---|
| Option | zIndex:Object|false | { targets: { start: 200, factor: -1 } } | Set z-index on activation, can be elements, targets, elementsInner, targetsInner |
Other
| Syntax | Default / Arguments | Description | |
|---|---|---|---|
| Option | debug:Boolean | false | Debug on console |
| Option | visibleReinit:Boolean | true | Reinit when self.container becomes visible with display only one time and only if not already visible |