Class ScrollSnapSlider

Mostly CSS slider with great performance.

Constructors

constructor

Properties

element plugins removeEventListener addEventListener roundingMethod scrollTimeout itemSize sizingMethod slide

Methods

with attachListeners detachListeners slideTo destroy update

Constructors

constructor

Properties

element

element: HTMLElement

Base element of this slider

plugins

plugins: Map<string, ScrollSnapPlugin>

additional behaviour

removeEventListener

removeEventListener: {
    <K extends keyof HTMLElementEventMap>(
        type: K,
        listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
        options?: boolean | EventListenerOptions,
    ): void;
    (
        type: string,
        listener: EventListenerOrEventListenerObject,
        options?: boolean | EventListenerOptions,
    ): void;
}

Inherit Doc

addEventListener

addEventListener: {
    <K extends keyof HTMLElementEventMap>(
        type: K,
        listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
        options?: boolean | AddEventListenerOptions,
    ): void;
    (
        type: string,
        listener: EventListenerOrEventListenerObject,
        options?: boolean | AddEventListenerOptions,
    ): void;
}

Inherit Doc

roundingMethod

roundingMethod: (value: number) => number

Rounding method used to calculate the current slide (e.g. Math.floor, Math.round, Math.ceil, or totally custom.)

Type declaration

    • (value: number): number

    • Parameters

      • value: number

        factor indicating th current position (e.g "0" for first slide, "2.5" for third slide and a half)

      Returns number

      f(x) - integer factor indicating the currently 'active' slide.

scrollTimeout

scrollTimeout: number

Timeout delay in milliseconds used to catch the end of scroll events

itemSize

itemSize: number

Calculated size of a single item

sizingMethod

sizingMethod: (
    slider: ScrollSnapSlider,
    entries?: ResizeObserverEntry[],
) => number

Computes a single number representing the slides widths. By default, this will use the first slide's offsetWidth. Possible values could be an average of all slides, the min or max values, ...

Type declaration

    • (slider: ScrollSnapSlider, entries?: ResizeObserverEntry[]): number

    • Parameters

      • slider: ScrollSnapSlider

        current slider

      • Optionalentries: ResizeObserverEntry[]

        resized entries

      Returns number

      integer size of a slide in pixels

slide

slide: number

Active slide

Methods

with

attachListeners

detachListeners

slideTo

destroy

update

Settings

Member Visibility

On This Page

Constructors
Properties
Methods