API
Slider
Toggle

Util

You can get self object from DOM node on Xtend UI components with Xt.get.

let self = Xt.get({ name: 'xt-slider', el: document.querySelector('.my-container') })

You can set default options for all components of the same type, with Xt.options.

Xt.options['xt-slider'] = {
  debug: true,
}

Listen

Listen to events, for listeners use this guideline.

SyntaxDOM ElementDescription
Eventon.xt.sliderelementstargetsActivation event (event e.detail is original event)
Eventoff.xt.sliderelementstargetsDeactivation event (event e.detail is original event)
Eventondone.xt.sliderelementstargetsActivation event after delay and duration
Eventoffdone.xt.sliderelementstargetsDeactivation event after delay and duration
Eventmedialoaded.xt.sliderelementstargetsImages loaded event, only when setting options.mediaLoaded: true
Eventautostart.xt.slidercontainerAuto start event
Eventautostop.xt.slidercontainerAuto stop event
Eventautoheight.xt.slidertargetsAutoheight event
Eventinit.xt.slidercontainerInit or reinit event
Eventstatus.xt.slidercontainerStatus event (enabled or disabled)
Eventrestart.xt.slidercontainerRestart event
Eventdestroy.xt.slidercontainerDestroy event

Trigger

Trigger events on DOM node.

document.querySelector('#my-element-or-target').dispatchEvent(new CustomEvent('on.trigger.xt.slider'))
SyntaxDOM ElementDescription
Eventon.trigger.xt.sliderelementstargetsActivation event
Eventoff.trigger.xt.sliderelementstargetsDeactivation event
Eventautostart.trigger.xt.slidercontainerAuto start event
Eventautostop.trigger.xt.slidercontainerAuto stop event

You can pass e.detail to the trigger event.

With on and off event e.detail.force = true will force the activation/deactivation skipping checks.

document.querySelector('#my-element-or-target').dispatchEvent(new CustomEvent('on.trigger.xt.slider', { detail: { force: true } }))

Properties

Access properties by getting self object.

let self = Xt.get({ name: 'xt-slider', el: document.querySelector('.my-container') })
const container = self.container
SyntaxDescription
PropertycomponentName:StringComponent name (used in Xt.get)
Propertyoptions:ObjectFinal options
Propertyinitial:BooleanIf initial or reset activation
Propertyindex:NumberCurrent index of activation
Propertydisabled:BooleanIf component disabled
Propertycontainer:NodeContainer node
Propertyelements:ArrayElements nodes
Propertytargets:ArrayTargets nodes
Propertypags:ArrayPagination nodes
Propertywrap:BooleanIf wrap activation
Propertydirection:NumberDirection 1 or -1
Propertyautoblock:BooleanBlock all auto logic
Propertydragger:NodeDragger node
Propertydrag.size:NumberDragger size
Propertydrag.sizeContent:NumberContent size

Methods

Call methods by getting self object.

const self = Xt.get({ name: 'xt-slider', el: document.querySelector('.my-container') })
self.destroy()
self = null
SyntaxDescription
Methodself.getElements(el:Node, same:Boolean = false)Get all elements from element or target, also with same drag activation, returns Array
Methodself.getTargets(el:Node, same:Boolean = false)Get all targets from element or target, also with same drag activation, returns Array
Methodself.getElementsGroups()Get elements (one per group), returns Array
Methodself.hasCurrent({ el:Node, same:Boolean = false })Check if element or target is activated, returns Boolean
Methodself.getIndex({ el:Node })Get activation index of from element or target, returns Number
Methodself.reinit({ save:Boolean = true })Reinit component and save currents as initial (default: true)
Methodself.restart()Restart component to initial
Methodself.disable()Disable component
Methodself.enable()Enable component
Methodself.destroy({ weak:Boolean = false })Destroy component

You can get activated elements or targets with hasCurrent.

self.elements.filter(x => self.hasCurrent({ el: x }))
self.targets.filter(x => self.hasCurrent({ el: x }))

Index methods, they all consider options.loop.

SyntaxDescription
Methodself.getNextIndex({ index:Number|false = false, amount:Number = 1, loop:Boolean|null = null })Get next activation index, returns Number|null
Methodself.getNext({ amount:Number = 1, loop:Boolean|null = null })Get next element, returns Node|null
Methodself.goToNext({ amount:Number = 1, force:Boolean = false, loop:Boolean|null = null })Activate next element, returns Node|null
Methodself.getPrevIndex({ index:Number|false = false, amount:Number = 1, loop:Boolean|null = null })Get prev activation index, returns Number|null
Methodself.getPrev({ amount:Number = 1, loop:Boolean|null = null })Get previous element, returns Node|null
Methodself.goToPrev({ amount:Number = 1, force:Boolean = false, loop:Boolean|null = null })Activate previous element, returns Node|null
Methodself.getNumIndex({ index:Number, loop:Boolean|null = null }Get index from number, return Number|null
Methodself.getNum({ index:Number = 1, loop:Boolean|null = null })Get element from index, returns Node|null
Methodself.goToNum({ index:Number, force:Boolean = false, loop:Boolean|null = null })Activate index, returns Node|null

API Demo