Class Snap

Snap/Carousel handler. This class manages sliding progress with options like swipe, wheel interactions, and smooth transitions.

Please not that the class does not apply any styles to the slides, it only handles the logic.

Documentation

Hierarchy (View Summary)

Constructors

  • Parameters

    • props: ISnapStaticProps & ISnapMutableProps & Partial<
          {
              onActiveSlide: (data: SnapSlide, ctx: Snap) => void;
              onDestroy: (data: undefined, ctx: Snap) => void;
              onIdle: (data: undefined, ctx: Snap) => void;
              onProps: (data: Partial, ctx: Snap) => void;
              onRafPause?: (data: undefined, ctx: Snap) => void;
              onRafPlay?: (data: undefined, ctx: Snap) => void;
              onReflow: (data: undefined, ctx: Snap) => void;
              onResize: (data: undefined, ctx: Snap) => void;
              onSwipe: (data: ISwipeCoords, ctx: Snap) => void;
              onSwipeEnd: (data: ISwipeCoords, ctx: Snap) => void;
              onSwipeInertiaCancel: (data: undefined, ctx: Snap) => void;
              onSwipeInertiaEnd: (data: undefined, ctx: Snap) => void;
              onSwipeInertiaFail: (data: undefined, ctx: Snap) => void;
              onSwipeInertiaStart: (data: undefined, ctx: Snap) => void;
              onSwipeStart: (data: ISwipeCoords, ctx: Snap) => void;
              onTimelineEnd: (data: undefined, ctx: Snap) => void;
              onTimelineStart: (data: undefined, ctx: Snap) => void;
              onTimelineUpdate: (data: ITimelineProgressArg, ctx: Snap) => void;
              onUpdate: (data: undefined, ctx: Snap) => void;
              onWheel: (data: WheelEvent, ctx: Snap) => void;
              onWheelEnd: (data: undefined, ctx: Snap) => void;
              onWheelStart: (data: undefined, ctx: Snap) => void;
          },
      >
    • OptionalonCallbacks: Partial<
          {
              onActiveSlide: (data: SnapSlide, ctx: Snap) => void;
              onDestroy: (data: undefined, ctx: Snap) => void;
              onIdle: (data: undefined, ctx: Snap) => void;
              onProps: (data: Partial, ctx: Snap) => void;
              onRafPause?: (data: undefined, ctx: Snap) => void;
              onRafPlay?: (data: undefined, ctx: Snap) => void;
              onReflow: (data: undefined, ctx: Snap) => void;
              onResize: (data: undefined, ctx: Snap) => void;
              onSwipe: (data: ISwipeCoords, ctx: Snap) => void;
              onSwipeEnd: (data: ISwipeCoords, ctx: Snap) => void;
              onSwipeInertiaCancel: (data: undefined, ctx: Snap) => void;
              onSwipeInertiaEnd: (data: undefined, ctx: Snap) => void;
              onSwipeInertiaFail: (data: undefined, ctx: Snap) => void;
              onSwipeInertiaStart: (data: undefined, ctx: Snap) => void;
              onSwipeStart: (data: ISwipeCoords, ctx: Snap) => void;
              onTimelineEnd: (data: undefined, ctx: Snap) => void;
              onTimelineStart: (data: undefined, ctx: Snap) => void;
              onTimelineUpdate: (data: ITimelineProgressArg, ctx: Snap) => void;
              onUpdate: (data: undefined, ctx: Snap) => void;
              onWheel: (data: WheelEvent, ctx: Snap) => void;
              onWheelEnd: (data: undefined, ctx: Snap) => void;
              onWheelStart: (data: undefined, ctx: Snap) => void;
          },
      >

    Returns Snap

Accessors

  • get isDestroyed(): boolean

    Checks if the module has been destroyed.

    Returns boolean

  • get isSlideScrolling(): boolean

    Check if the active slide is larger than the container and is being scrolled

    Returns boolean

  • get name(): string

    The name of the module, derived from the class name

    Returns string

  • get prefix(): string

    Optional prefix for classnames used by the module

    Returns string

Methods

  • Adds a class name on an element, and keeps track of it for removal when the module is destroyed.

    Parameters

    • element: Element

      The target DOM element.

    • className: string

      The class name to toggle.

    Returns void

  • Helper function to generate classnames with the module's prefix.

    Parameters

    • ...classNames: string[]

      The class names to generate.

    Returns string

    A string of class names with the module's prefix applied.

  • Returns the default mutable properties.

    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: "prev" | "next";
        lerp: number;
        loop: boolean;
        origin: "center" | "start" | "end";
        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: Snap, index: number): void;
                    $_detach(): void;
                    $_render(): void;
                    $_setStaticCoord(value: number): void;
                    $_updateCoords(offset: number): void;
                    $_updateProgress(): 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

      false
      
    • interval: number

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

      null
      
    • intervalDirection: "prev" | "next"

      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'
      
    • 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: Snap, index: number): void;
                  $_detach(): void;
                  $_render(): void;
                  $_setStaticCoord(value: number): void;
                  $_updateCoords(offset: number): void;
                  $_updateProgress(): 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 wheel is enabled
      • `number - value in milliseconds

      auto

  • Returns the default static properties.

    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
      
  • Adds a callback on the module's destruction.

    Parameters

    • action: () => void

      The function to execute during destruction.

    Returns void

  • Request resize (handled with debounce timeout)

    Parameters

    • isManual: boolean = true

    Returns void