Panel Slider

© by Mike Linkovich | www.spacejack.ca

Live demo

Install:

npm install panel-slider

Example Usage:

import PanelSlider from 'panel-slider'
 
const slider = PanelSlider({
    // The root element containing all panels
    element: document.querySelector('.my-panel-slider'),
    // Number of equal-sized panels
    numPanels: 3,
    // Starting panel
    initialPanel: 0
})

All Options:

interface PanelSliderOptions {
    /** The root element to use */
    element: HTMLElement
    /** Number of panels the root element is divided into */
    numPanels: number
    /** Starting panel */
    initialPanel?: number
    /** Duration of slide animation on release (default 500ms) */
    slideDuration?: number
    /** Horizontal distance threshold to initiate drag (default 12px) */
    dragThreshold?: number
    /** Minimum required horizontal:vertical ratio to initiate drag (default 1.5) */
    dragRatio?: number
    /** Input devices to enable (default ['mouse', 'touch']) */
    devices?: ('mouse' | 'touch')[]
    /**
     * Optional custom animation interpolation function
     * @param x0 Start coordinate
     * @param x1 End coordinate
     * @param t Time (0..1)
     */
    terp?(x0: number, x1: number, t: number): number
}

Returned Interface:

interface PanelSlider {
    /** Add a listener that fires when drag starts */
    on(eventType: 'dragstart', cb: (d: Drag) => void): void
    /** Remove dragstart listener */
    off(eventType: 'dragstart', cb: (d: Drag) => void): void
    /** Add a listener that fires every move event while dragging */
    on(eventType: 'drag', cb: (d: Drag) => void): void
    /** Remove drag listener */
    off(eventType: 'drag', cb: (d: Drag) => void): void
    /** Add a listener that fires when drag ended */
    on(eventType: 'dragend', cb: (d: Drag) => void): void
    /** Remove dragend listener */
    off(eventType: 'dragend', cb: (d: Drag) => void): void
    /** Add a listener that fires when drag canceled */
    on(eventType: 'dragcancel', cb: (d: Drag) => void): void
    /** Remove dragcancel listener */
    off(eventType: 'dragcancel', cb: (d: Drag) => void): void
    /** Add a listener that fires every frame the panel moves */
    on(eventType: 'animate', cb: (panelFraction: number) => void): void
    /** Remove animate listener */
    off(eventType: 'animate', cb: (panelFraction: number) => void): void
    /** Add a listener that fires when animation starts or ends */
    on(eventType: 'animationstatechange', cb: (animating: boolean) => void): void
    /** Remove animationstatechange listener */
    off(eventType: 'animationstatechange', cb: (animating: boolean) => void): void
    /** Add a listener that fires when current panel has changed */
    on(eventType: 'panelchange', cb: (panelId: number) => void): void
    /** Remove panelchange listener */
    off(eventType: 'panelchange', cb: (panelId: number) => void): void
    /** Sets the current panel - animates to position */
    setPanel(panelId: number, done?: (panelId: number) => void): void
    /** Gets the current panel */
    getPanel(): number
    /** Gets the current root element & panel sizes */
    getSizes(): {fullWidth: number, panelWidth: number}
    /** Returns whether panels are currently being dragged or not */
    isDragging(): boolean
    /** Returns whether panels are currently animating or not */
    isAnimating(): boolean
    /** Destroy & cleanup resources */
    destroy(): void
}

Drag object provided to drag callbacks

export interface Drag {
    /** Horizontal amount dragged from start (in pixels) */
    x: number
    /** Current horizontal velocity */
    v: number
}