Interface ISnapMutableProps

Mutable properties for the Snap component

interface ISnapMutableProps {
    __mutableProp?: true;
    centered?: boolean;
    containerSize?: number | string & {} | "auto";
    direction?: "horizontal" | "vertical";
    duration?: TSnapDuration;
    easing?: TEasingType;
    edgeFriction?: number;
    followSwipe?: boolean;
    followWheel?: boolean;
    freemode?: boolean | "sticky";
    friction?: number;
    gap?: string | number;
    grabCursor?: boolean;
    interval?: null | number;
    intervalDirection?: "prev" | "next";
    lerp?: number;
    loop?: boolean;
    origin?: "center" | "start" | "end";
    rewind?: boolean;
    shortSwipes?: boolean;
    shortSwipesDuration?: number;
    shortSwipesThreshold?: number;
    slides?: false | (HTMLElement | SnapSlide)[];
    slideSize?: null | number | string & {} | "auto" | "stretch";
    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";
}

Hierarchy (View Summary)

Properties

__mutableProp? centered? containerSize? direction? duration? easing? edgeFriction? followSwipe? followWheel? freemode? friction? gap? grabCursor? interval? intervalDirection? lerp? loop? origin? rewind? shortSwipes? shortSwipesDuration? shortSwipesThreshold? slides? slideSize? slidesToScroll? stickOnResize? stickOnWheelEnd? stickOnWheelEndThreshold? swipe? swipeAxis? swipeFriction? swipeInertiaDuration? swipeInertiaRatio? swipeMinTime? swipeSpeed? swipeThreshold? wheel? wheelAxis? wheelSpeed? wheelThrottle?

Properties

Optional__mutableProp

__mutableProp?: true

Optionalcentered

centered?: boolean

Deprecated

Use origin instead

OptionalcontainerSize

containerSize?: number | string & {} | "auto"

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.

Default

'auto'

Optionaldirection

direction?: "horizontal" | "vertical"

Sliding direction

Default

'horizontal'

Optionalduration

duration?: TSnapDuration

Change slide duration

Default

600

Optionaleasing

easing?: TEasingType

Easing type for timelines

Default

EaseOutCubic

OptionaledgeFriction

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.

Default

0.7

OptionalfollowSwipe

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.

Default

true

OptionalfollowWheel

followWheel?: boolean

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

Default

true

Optionalfreemode

freemode?: boolean | "sticky"

Enables freemode, with or without sticky magnets.

Default

false

Optionalfriction

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

Default

0

Optionalgap

gap?: string | number

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

Default

0

OptionalgrabCursor

grabCursor?: boolean

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

Default

false

Optionalinterval

interval?: null | number

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

Default

null

OptionalintervalDirection

intervalDirection?: "prev" | "next"

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

Default

'next'

Optionallerp

lerp?: number

Linear interpolation factor for smooth coordinates updates.

Default

vevet.mobile ? 1 : 0.3

Optionalloop

loop?: boolean

Detects if need to loop the progress

Default

false

Optionalorigin

origin?: "center" | "start" | "end"

Slide magnet origin

Default

'start'

Optionalrewind

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.

Default

false

OptionalshortSwipes

shortSwipes?: boolean

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

Default

true

OptionalshortSwipesDuration

shortSwipesDuration?: number

Short swipe maximum duration

Default

300

OptionalshortSwipesThreshold

shortSwipesThreshold?: number

Minimum distance in pixels to trigger slide change for short swipes

Default

30

Optionalslides

slides?: false | (HTMLElement | SnapSlide)[]

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

Default

false

OptionalslideSize

slideSize?: null | number | string & {} | "auto" | "stretch"

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.

Default

'auto'

OptionalslidesToScroll

slidesToScroll?: number

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

Default

1

OptionalstickOnResize

stickOnResize?: boolean

Snap to the nearest slide on carousel resize

Default

true

OptionalstickOnWheelEnd

stickOnWheelEnd?: boolean

Enable snapping on wheel stop. Works with followWheel enabled.

Default

true

OptionalstickOnWheelEndThreshold

stickOnWheelEndThreshold?: number

Snapping threshold for stickOnWheelEnd

Default

30

Optionalswipe

swipe?: boolean

Enable or disable swipe events

Default

true

OptionalswipeAxis

swipeAxis?: "auto" | "x" | "y" | "angle"

Swipe axis

Default

'auto'

OptionalswipeFriction

swipeFriction?: boolean

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

Default

false

OptionalswipeInertiaDuration

swipeInertiaDuration?: (distance: number) => number

Deprecated

OptionalswipeInertiaRatio

swipeInertiaRatio?: number

Inertia strength.

Default

1

OptionalswipeMinTime

swipeMinTime?: number

Minimum time in milliseconds to trigger swipe move.

Default

0

OptionalswipeSpeed

swipeSpeed?: number

Speed factor for swipe movements.

Default

1

OptionalswipeThreshold

swipeThreshold?: number

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

Default

5

Optionalwheel

wheel?: boolean

Enable or disable mouse wheel events for progress control

Default

false

OptionalwheelAxis

wheelAxis?: "auto" | "x" | "y"

Wheel axis

Default

'auto'

OptionalwheelSpeed

wheelSpeed?: number

Speed factor for mouse wheel movements

Default

1

OptionalwheelThrottle

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

Default

auto

Settings

Member Visibility

On This Page

Properties