import Glider from 'paraglider/src/glider/index.js'

public class | source

Glider

Paraglider plugin.

Constructor Summary

Public Constructor
public	constructor(options: PLUGIN_DEFAULTS): this Paraglider is an API driven slider.

Member Summary

Private Members
private	_state: object State store for interaction flags
private	animation: loop Animation flag.
private	el: Element Outer element
private	options: object Plugin options merged from defaults and custom configuration
private	slides: array<Element> A list of all slides.
private	slidesWrapper: Element This element is used to track mouse or touch interaction
private get	state: object: * Getter for the state

Method Summary

Public Methods
public	destroy() Destroys the plugin by removing event listeners and class names
public	goTo(n: number): * Moves to the nth slide via trigger.
public	init(el: Element) Init call for the plugin.
public	nextSlide(e: Event): * Moves to the next slide via trigger.
public	prevSlide(e: Event): * Moves to the previous slide via trigger.

Private Methods
private	addClassNames() Adds class names to slides
private	addInitClassNames() Initially set class names
private	addListeners() Adds event listeners needed for this plugin to work.
private	addSides() Add `previous` and `next` classes around the `current` slide.
private	getClientX(e: Event): number Find clientX from the event.
private	getReturnValues(direction: boolean): object Prepares return values
private	handleDown(e: Event) First interaction with the mouse or per touch will be used to set flags and define initial values.
private	handleEnd(end: number) Handle the end of the slide animation.
private	handleMove(e: Event) Handler for mouse or touch movement.
private	handleProgress() Handles the progress.
private	handleUp() Last interaction with the mouse or per touch will be used to set flags and define initial values.
private	removeClassNames() Batch removal of class names.
private	removeListeners() Removes all event listeners.
private	setState(newState: object) Handles internal storage
private	spring(progress: number, end: number, duration: number) Handles the snap animation

Public Constructors

public constructor(options: PLUGIN_DEFAULTS): this source

Paraglider is an API driven slider. It exposes a timeline and offers some options.

This gives developers a lot of freedom when implementing a slider. The main purpose for this plugin is to create slideshows with a parallax effect. Due to the simplicity you can feed the timeline to other plugins and create amazing effects like animating SVGs or drawing on a canvas.

Params:

Name	Type	Attribute	Description
options	PLUGIN_DEFAULTS		Custom options for the Plugin call

Return:

this

Private Members

private _state: object source

State store for interaction flags

private animation: loop source

Animation flag. Calls the animation and stores the function to allow cancelAnimationFrame

private el: Element source

Outer element

private options: object source

Plugin options merged from defaults and custom configuration

private slides: array<Element> source

A list of all slides.

private slidesWrapper: Element source

This element is used to track mouse or touch interaction

private get state: object: * source

Getter for the state

Return:

object

Public Methods

public destroy() source

Destroys the plugin by removing event listeners and class names

public goTo(n: number): * source

Moves to the nth slide via trigger. Respects left/right movement

Params:

Name	Type	Attribute	Description
n	number		index of requested slide

Return:

public init(el: Element) source

Init call for the plugin.

This method assigns the element to the plugin scope, adds the required event listeners and class names.

Params:

Name	Type	Attribute	Description
el	Element		An element containing the required markup with and selectors

public nextSlide(e: Event): * source

Moves to the next slide via trigger.

Params:

Name	Type	Attribute	Description
e	Event	optional default: null nullable: true	optionally pass the event to prevent it

Return:

public prevSlide(e: Event): * source

Moves to the previous slide via trigger.

Params:

Name	Type	Attribute	Description
e	Event	optional default: null nullable: true	optionally pass the event to prevent it

Return:

Private Methods

private addClassNames() source

Adds class names to slides

private addInitClassNames() source

Initially set class names

init will be removed after the first interaction. It allows a 'silent' start when working with CSS animations or transitions.

private addListeners() source

Adds event listeners needed for this plugin to work. Movement and release should be tracked on window or document.

Listen:

touchmove	Listens to touchmove if `enableTouch === true` global listener to allow out of bounds movement.
touchend	Listens to touchend if `enableTouch === true` global listener to allow out of bounds movement.
touchstart	Listens to touchstart if `enableTouch === true` scoped listener to determine activity
mousemove	Listens to mousemove if `enableSwipe === true` global listener to allow out of bounds movement.
mouseup	Listens to mouseup if `enableSwipe === true` global listener to allow out of bounds movement.
mousedown	Listens to mousedown if `enableSwipe === true` scoped listener to determine activity

private addSides() source

Add previous and next classes around the current slide. This function respects pager clicks, which modify the next or previous element.

private getClientX(e: Event): number source

Find clientX from the event. This helper will return the correct value for touch or mouse.

Params:

Name	Type	Attribute	Description
e	Event		Mouse or touch event

Return:

number

THe clientX of the event

private getReturnValues(direction: boolean): object source

Prepares return values

Params:

Name	Type	Attribute	Description
direction	boolean

Return:

object

private handleDown(e: Event) source

First interaction with the mouse or per touch will be used to set flags and define initial values.

Params:

Name	Type	Attribute	Description
e	Event		Mouse or touch event

private handleEnd(end: number) source

Handle the end of the slide animation. If there is a callback called onEnd call it.

Params:

Name	Type	Attribute	Description
end	number		Final value

private handleMove(e: Event) source

Handler for mouse or touch movement. Waits for a threshold and then records the movement on the x axis

Params:

Name	Type	Attribute	Description
e	Event		Mouse or touch move event

private handleProgress() source

Handles the progress. Calculates the progress from the internal state and element dimension. A callback is fired if set

private handleUp() source

Last interaction with the mouse or per touch will be used to set flags and define initial values. Only fires if down is active. Prevents unintended behavior when the first touch or mousedown was outside the element.

private removeClassNames() source

Batch removal of class names. This is dirty but simply removes anything the plugin could have set.

TODO:

Find a better way to do this.

private removeListeners() source

Removes all event listeners. (Helpful when destroying the plugin instance)

private setState(newState: object) source

Handles internal storage

Params:

Name	Type	Attribute	Description
newState	object		The new state properties to merge into the old state

private spring(progress: number, end: number, duration: number) source

Handles the snap animation

Params:

Name	Type	Attribute	Description
progress	number		Current value
end	number		Final value
duration	number		Time to pass the until animation is done.