Interaction
Slider
Toggle

Elements

See toggle elements for more info.

You can specify elements that listens to event for activation, and targets that gets activated.

SyntaxDefault / ArgumentsDescription
OptionelementsTemplate:String'hidden'Elements template class
Optionelements:Query'[data-xt-slider-element]'Elements query
Optiontargets:Query'[data-xt-slider-target]'Targets query
OptionelementsInner:QueryfalseInner elements query, they reflect elements activation
OptiontargetsInner:QueryfalseInner targets query, they reflect targets activation
Optionexclude:QueryfalseExclude elements and targets if they matches the query

Do not assign other components to xt-slide or the components activations conflict.

You can filter elements and targets dynamically with exclude, just reinit the component when you want to recalculate exclude on elements and targets.

Class

See toggle class for more info.

You can set initial activation by adding on to the elements or targets.

SyntaxDefault / ArgumentsDescription
Optionclass:StringonClass name for activation
OptionclassIn:StringinClass name for in animation
OptionclassOut:StringoutClass name for out animation
OptionclassDone:StringdoneClass name for in animation done
OptionclassInitial:StringinitialClass name for initialization
OptionclassBefore:Stringdir-beforeClass name for before direction activation
OptionclassAfter:Stringdir-afterClass name for after direction activation
OptionclassSkip:ObjectfalseSkip class activation and deactivation e.g.: { elements: true, elementsInner: true, targets: true, targetsInner: true }

Additionally on component initialization the attribute [data-xt-slider-init] gets added to the object.

Quantity

See toggle quantity for more info.

You can specify min and max concurrent activations. The min option is fulfilled on initialization, the max options deactivates the first activated when max is reached.

SyntaxDefault / ArgumentsDescription
Optionmin:Number1Minimum number of concurrent elements activated
Optionmax:Number1Maximum number of concurrent elements activated

Event

See toggle event for more info.

Hash

You can link the activation in the url hash to be linkable and more usable, hash activation has precedence over class activation.

Hash attribute data-xt-hash can be on elements or targets, also hash activates on hash location change.

SyntaxDefault / ArgumentsDescription
Optionhash:String|false[data-xt-hash]Link activation in location hash using elements and targets attribute hash value

Try the demo on a new page to preview location hash changes.

Drag

SyntaxDefault / ArgumentsDescription
Optiondrag.dragger:Query'[data-xt-slider-dragger]'Query for dragger element
Optiondrag.threshold:Number50Minumim drag size for activation and disable interactions on targets
Optiondrag.factor:Number1Factor multiplier for drag
Optiondrag.overflow({ overflow }):Function|false<Function>Factor when dragging beyond the first and the last slide, return Number

Default functions as follow.

drag: {
  overflow: ({ overflow }) => {
    return Math.min(overflow, Math.log(1 + Math.pow(overflow, 10)))
    // other examples of overflow
    //return Math.pow(overflow, 0.6)
    //return overflow / 9
  },
},

Pagination

Inside [data-xt-slider-element].hidden you can use this strings that gets populated with variables:

  • xt-num replaced with pagination's number slide
  • xt-tot replaced with pagination's total slides
  • xt-content replaced with slide's [data-xt-slider-content] innerHTML.
  • Classes added with slide's [data-xt-slider-element-classes] value.
SyntaxDefault / ArgumentsDescription
Optionpagination:Query'[data-xt-slider-pagination]'Query for pagination element

[data-xt-slider-element].hidden is essential to the functioning of the slider, it gets cloned inside the closest [data-xt-slider-pagination] but you can hide it using the class [data-xt-slider-pagination].hidden.

You can use pagination also inside targets as you can see in the demo.

Navigation and Loop

You can add navigation with [data-xt-nav="value"] to set the amount to add (+1) or remove (-1) to the current activation index.

SyntaxDefault / ArgumentsDescription
Optionnavigation:Query'[data-xt-nav]'Query for navigation elements

You can make the activation loop with loop: true, also when dragging beyond the first and the last slide.

SyntaxDefault / ArgumentsDescription
Optionloop:BooleanfalseLoop activation

You can use navigation also inside targets as you can see in the demo.

Jump

Use jump: true to enable clicking on a target to jump to them, only when overflowing the dragger.

SyntaxDefault / ArgumentsDescription
Optionjump:BooleanfalseClicking on targets triggers activation

Auto

SyntaxDefault / ArgumentsDescription
Optionauto.time:NumberfalseAutomatic activation time
Optionauto.initial:BooleantrueAutomatic activation on initial
Optionauto.step:Number1Automatic activation steps
Optionauto.inverse:BooleanfalseAutomatic activation inverse order
Optionauto.pause:Query'a, button'Query inside container that pause automatic on mouseenter
Optionauto.loop:BooleantrueLoop activation beyond start and end

Auto doesn't run if the slider is display: none. Start it manually when visible using slider events.

Use the api and listen to events to make auto progress indicators.