Advanced
Slider
Future

Drag Position

By default mode: 'relative' sliders has automatic transform position of dragger and needs to be animated with css transition.

Use Tailwind CSS to assign animation (e.g. transition-property, transition-duration, transition-timing-function).

You can also use Tailwind CSS variants on: on dragger to animate differently on activation (default styles are for all transitions including drag).

You can manually assign transform of dragger and use any animation you want with javascript, in javascript just remember to set position animation to keep updated with animation and dragger animation.

Listen to the event dragposition.xt.slider and:

update the value of self.drag._position animating it with that duration and your custom easing.
on relative mode animates self.dragger to the final position value self.drag._final with your custom duration and easing.

	Syntax	Default / Arguments	Description
Option	`dragposition:Boolean`	`false`	Animate `dragger` manually with `dragposition.xt.slider` event instead of css transition

This is done in order to keep the internal slider values updated with your custom slider animations, needed especially for absolute mode.

Automatic Scrolling

Example of infinite automatic scrolling slider, with also drag and pauses on interaction and automatically disables if not enough space.

Absolute

With absolute mode all animation of the slides are given by yout custom gsap animations.

You only have to listen to slider events slider's api and animate using the self.drag._ratio, self.drag._ratioInverse, self.drag._instant and self.direction values.

On absolute mode in on.xt.slider and off.xt.slider you can use gsap.set only if !self.drag._instant or if using self.drag._ratio or self.drag._ratioInverse.

Cover

Here's an example of absolute animation with cover and mask, also on on.xt.slider we instantly change slide by setting self.drag._position to self.drag._final.

Mask

Here's an example of absolute animation with mask and incoming slide, on drag.xt.slider we get and animate incoming slide depending on drag direction, also on off.xt.slider it animates the old incoming slide .

Position

Activate free drag while retaining targets activations and elements interactions.

	Syntax	Default / Arguments	Description
Option	`free:Boolean`	`false`	Free drag

Wheel

Use self.wheelEvent for interaction on mousewheel to attach wheel event to drag.

	Syntax	Description
Method	`self.wheelEvent({ factor:Number = -1, timeout:Number = 250, threshold:Number = 10 }, e:Event)`	Attach wheel event to drag, returns `Boolean` if not overflowing

You can choose when to e.preventDefault(), for this you can check for returned value of self.wheelEvent if not overflowing.

For absolute mode additionally on dragposition.xt.slider set the dragDuration with the desired animation duration only if self.drag._dragging && self.wheel._wheeling.

You can attach wheel event to window or other DOM elements.