Class Snap

Low-level carousel handler for slide progress, snapping, and interaction.

  • Collects slides, computes magnets, and drives transforms via render
  • Interpolates track values with Raf; programmatic moves use Timeline
  • Input: swipe, wheel, keyboard scroll lock, and autoplay interval
  • Does not apply layout or styles — position slides in an update callback

Documentation

Hierarchy (View Summary)

Constructors

Accessors

  • get $_animation(): SnapAnimation
    Internal

    Returns SnapAnimation

  • get $_track(): SnapTrack
    Internal

    Returns SnapTrack

  • get activeIndex(): number

    Returns number

  • get axis(): "x" | "y"

    Returns "x" | "y"

  • get canLoop(): boolean

    Returns boolean

  • get container(): HTMLElement

    Returns HTMLElement

  • get containerSize(): number

    Returns number

  • get current(): number

    Returns number

  • get domSize(): number

    Returns number

  • get eventsEmitter(): HTMLElement

    Returns HTMLElement

  • get firstSlideSize(): number

    Returns number

  • get hasInertia(): boolean

    Returns boolean

  • get hasInteria(): boolean

    Returns boolean

  • get impulse(): number

    Returns number

  • get influence(): number

    Returns number

  • get isDestroyed(): boolean

    Indicates whether the instance has been destroyed.

    After destruction, destroy is a no-op.

    Returns boolean

  • get isEmpty(): boolean

    Returns boolean

  • get isEnd(): boolean

    Returns boolean

  • get isIdle(): boolean

    Not swiping, wheeling, interpolating, or transitioning.

    Returns boolean

  • get isInterpolating(): boolean

    Returns boolean

  • get isSlideScrolling(): boolean

    True when an oversized active slide is scrolled inside the container.

    Returns boolean

  • get isStart(): boolean

    Returns boolean

  • get isSwiping(): boolean

    Returns boolean

  • get isTransitioning(): boolean

    Returns boolean

  • get isWheeling(): boolean

    Returns boolean

  • get loopCount(): number

    Returns number

  • get loopedCurrent(): number

    Returns number

  • get max(): number

    Returns number

  • get min(): number

    Returns number

  • get name(): string

    The name of the module, derived from the class name

    Returns string

  • get origin(): "center" | "start" | "end"

    Returns "center" | "start" | "end"

  • get prefix(): string

    Optional prefix for classnames used by the module

    Returns string

  • get progress(): number

    0…1 when not looping; unbounded when loop is enabled.

    Returns number

  • get scrollableSlides(): SnapSlide[]

    Slides larger than the container (supports inner scroll within a slide).

    Returns SnapSlide[]

  • get target(): number

    Returns number

Methods

  • Adds prefixed classes to an element and removes them on destroy.

    Skips classes that are already present on the element.

    Parameters

    • element: Element

      Target DOM element.

    • ...classes: string[]

      Unprefixed class name segments.

    Returns void

  • Builds one or more prefixed class names.

    Parameters

    • ...classes: string[]

      Unprefixed class name segments.

    Returns string

    Space-separated prefixed class string.

  • Releases resize observers, animation loop, slides (parallax, slide resize), and input handlers (swipe, wheel, interval, keyboard).

    Returns void

  • Set default mutable props

    Returns {
        __mutableProp: true;
        centered: boolean;
        containerSize: string | number;
        direction: "horizontal" | "vertical";
        duration: TSnapDuration;
        easing: false | number[] | TEasingFunction;
        edgeFriction: number;
        followSwipe: boolean;
        followWheel: boolean;
        freemode: boolean | "sticky";
        friction: number;
        gap: string | number;
        grabCursor: boolean;
        interval: number;
        intervalDirection: "next" | "prev";
        lerp: number;
        loop: boolean;
        origin: "center" | "start" | "end";
        preventWheel: boolean;
        rewind: boolean;
        shortSwipes: boolean;
        shortSwipesDuration: number;
        shortSwipesThreshold: number;
        slides:
            | false
            | (
                | HTMLElement
                | {
                    coord: number;
                    element: HTMLElement;
                    index: number;
                    isVisible: boolean;
                    magnets: number[];
                    progress: number;
                    size: number;
                    staticCoord: number;
                    $_attach(ctx: ISnapSlideCtx, index: number): void;
                    $_detach(): void;
                    $_render(): void;
                    $_setStaticCoord(value: number): void;
                    $_update(current: number, offset: number): void;
                    resize(isManual?: boolean): void;
                }
            )[];
        slideSize: string
        | number;
        slidesToScroll: number;
        stickOnResize: boolean;
        stickOnWheelEnd: boolean;
        stickOnWheelEndThreshold: number;
        swipe: boolean;
        swipeAxis: "auto" | "x" | "y" | "angle";
        swipeFriction: boolean;
        swipeInertiaDuration: (distance: number) => number;
        swipeInertiaRatio: number;
        swipeMinTime: number;
        swipeSpeed: number;
        swipeThreshold: number;
        wheel: boolean;
        wheelAxis: "auto" | "x" | "y";
        wheelSpeed: number;
        wheelThrottle: number | "auto";
    }

    • __mutableProp: true
    • centered: boolean

      Use origin instead

    • containerSize: string | number

      Container size. Supported values:

      • auto detects slide size depending on the container size.
      • number defines the slide size in pixels.
      • css units like px, rem, vw, vh, svh.
      'auto'
      
    • direction: "horizontal" | "vertical"

      Sliding direction

      'horizontal'
      
    • duration: TSnapDuration

      Change slide duration

      600
      
    • easing: false | number[] | TEasingFunction

      Easing type for timelines

      EaseOutCubic
      
    • edgeFriction: number

      Maximum friction between the final slide and the maximum translation value. From 0 to 1. The higher value the more resistance is applied.

      0.7
      
    • followSwipe: boolean

      If disabled, then slider will be animated only when you release the finger, it will not move while you hold your finger on it.

      true
      
    • followWheel: boolean

      If false, disables smooth, continuous scrolling behavior from the mouse wheel and instead updates the snap position in discrete steps (like pagination).

      true
      
    • freemode: boolean | "sticky"

      Enables freemode, with or without sticky magnets.

      false
      
    • friction: number

      Friction that makes the slides tend to the nearest slide magnet. The value is a number between 0 and 1 which is multiplied by the lerp value. 0 disables friction

      0
      
    • gap: string | number

      The gap between slides. Supports css units like px, rem, vw, vh, svh.

      0
      
    • grabCursor: boolean

      User will see the "grab" cursor when hovering and "grabbing" when swiping

      true
      
    • interval: number

      Interval between automatic slide changes in milliseconds. If null, the interval is disabled.

      null
      
    • intervalDirection: "next" | "prev"

      Direction of automatic slide changes. Can be either 'next' or 'prev'.

      'next'
      
    • lerp: number

      Linear interpolation factor for smooth coordinates updates.

      vevet.mobile ? 1 : 0.3

    • loop: boolean

      Detects if need to loop the progress

      false
      
    • origin: "center" | "start" | "end"

      Slide magnet origin

      'start'
      
    • preventWheel: boolean

      Prevents the browser default wheel action, such as page scroll.

      false
      
    • rewind: boolean

      Enables wrap-around navigation: advancing from the last slide jumps to the first, and going back from the first jumps to the last. Has no effect when loop mode is enabled.

      false
      
    • shortSwipes: boolean

      When true, swipes shorter than shortSwipeDuration can trigger slide change. Short swipes work only when followSwipe is true.

      true
      
    • shortSwipesDuration: number

      Short swipe maximum duration

      300
      
    • shortSwipesThreshold: number

      Minimum distance in pixels to trigger slide change for short swipes

      30
      
    • slides:
          | false
          | (
              | HTMLElement
              | {
                  coord: number;
                  element: HTMLElement;
                  index: number;
                  isVisible: boolean;
                  magnets: number[];
                  progress: number;
                  size: number;
                  staticCoord: number;
                  $_attach(ctx: ISnapSlideCtx, index: number): void;
                  $_detach(): void;
                  $_render(): void;
                  $_setStaticCoord(value: number): void;
                  $_update(current: number, offset: number): void;
                  resize(isManual?: boolean): void;
              }
          )[]

      Slides instances. If false, all container's children will be considered as slides.

      false
      
    • slideSize: string | number

      Slide size. Supported values:

      • auto detects slide size depending on the element or container size.
      • stretch detects slide size as the container size.
      • number defines the slide size in pixels.
      • css units like px, rem, vw, vh, svh.
      'auto'
      
    • slidesToScroll: number

      Indicates the number of slides to scroll on swipe or wheel.

      1
      
    • stickOnResize: boolean

      Snap to the nearest slide on carousel resize

      true
      
    • stickOnWheelEnd: boolean

      Enable snapping on wheel stop. Works with followWheel enabled.

      true
      
    • stickOnWheelEndThreshold: number

      Snapping threshold for stickOnWheelEnd

      30
      
    • swipe: boolean

      Enable or disable swipe events

      true
      
    • swipeAxis: "auto" | "x" | "y" | "angle"

      Swipe axis

      'auto'
      
    • swipeFriction: boolean

      Defines if friction is allowed when swiping. Doesn't work with short swipes or when when followSwipe is false

      false
      
    • swipeInertiaDuration: (distance: number) => number
    • swipeInertiaRatio: number

      Inertia strength.

      1
      
    • swipeMinTime: number

      Minimum time in milliseconds to trigger swipe move.

      0
      
    • swipeSpeed: number

      Speed factor for swipe movements.

      1
      
    • swipeThreshold: number

      Length in pixels that must be swiped to trigger swipe start.

      5
      
    • wheel: boolean

      Enable or disable mouse wheel events for progress control

      false
      
    • wheelAxis: "auto" | "x" | "y"

      Wheel axis

      'auto'
      
    • wheelSpeed: number

      Speed factor for mouse wheel movements

      1
      
    • wheelThrottle: number | "auto"

      Throttle wheel events, value in milliseconds. Works only if followWheel is disabled.

      • auto — automatic detection when followWheel is disabled
      • number — value in milliseconds

      auto

  • Get default static props

    Returns {
        __staticProp: true;
        activeIndex: number;
        container: HTMLElement;
        eventsEmitter: HTMLElement;
    }

    • __staticProp: true
    • activeIndex: number

      Default active index

      0
      
    • container: HTMLElement

      HTML container

    • eventsEmitter: HTMLElement

      HTML Element used to emit events

      null
      
  • Method that is called when the module's properties mutate. In most cases, used to handle callbacks.

    Parameters

    Returns void

  • Returns void

  • Returns void

  • Destroys the instance and runs all registered cleanup actions.

    Safe to call multiple times; subsequent calls are ignored.

    Execution order:

    1. _destroy
    2. all onDestroy callbacks, in registration order
    3. isDestroyed is set to true

    Returns void

  • Parameters

    • coord: number

    Returns undefined | ISnapMagnet

  • Parameters

    • delta: number

    Returns void

  • Parameters

    • coord: number

    Returns number

  • Registers a function to run when the instance is destroyed.

    If the instance is already destroyed, action runs immediately.

    Parameters

    • action: () => void

      Cleanup function (for example remove listeners or DOM classes).

    Returns void

  • Parameters

    • frameDuration: number = 0

    Returns void

  • Parameters

    • isManual: boolean = true

    Returns void

  • Parameters

    • value: number

    Returns void

  • Parameters

    • value: number

    Returns void

  • Returns boolean

  • Parameters

    Returns boolean

  • Parameters

    Returns boolean