Interface ISnapMutableProps

Mutable properties for the Snap component

interface ISnapMutableProps {
    __mutableProp?: null;
    centered?: boolean;
    direction?: "horizontal" | "vertical";
    duration?: TSnapDuration;
    easing?: TEasingType;
    edgeFriction?: number;
    followSwipe?: boolean;
    followWheel?: boolean;
    freemode?: boolean;
    friction?: number;
    gap?: string | number;
    grabCursor?: boolean;
    lerp?: number;
    loop?: boolean;
    shortSwipes?: boolean;
    shortSwipesDuration?: number;
    shortSwipesThreshold?: number;
    slides?: false | (HTMLElement | SnapSlide)[];
    stickOnResize?: boolean;
    swipe?: boolean;
    swipeAxis?: "auto" | "x" | "y";
    swipeFriction?: boolean;
    swipeLerp?: number | false;
    swipeMinTime?: number;
    swipeSpeed?: number;
    swipeThreshold?: number;
    wheel?: boolean;
    wheelAxis?: "auto" | "x" | "y";
    wheelSpeed?: number;
}

Hierarchy (View Summary)

Properties

__mutableProp? centered? direction? duration? easing? edgeFriction? followSwipe? followWheel? freemode? friction? gap? grabCursor? lerp? loop? shortSwipes? shortSwipesDuration? shortSwipesThreshold? slides? stickOnResize? swipe? swipeAxis? swipeFriction? swipeLerp? swipeMinTime? swipeSpeed? swipeThreshold? wheel? wheelAxis? wheelSpeed?

Properties

Optional__mutableProp

__mutableProp?: null

Optionalcentered

centered?: boolean

Centered slides

Default

false

Optionaldirection

direction?: "horizontal" | "vertical"

Sliding direction

Default

'horizontal'

Optionalduration

duration?: TSnapDuration

Change slide duration

Default

500

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.85

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 disabled, then slider will be animated only when you stop scrolling the wheel.

Default

true

Optionalfreemode

freemode?: boolean

Disables friction and snapping to the nearest slide.

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.15

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

Optionallerp

lerp?: number

Linear interpolation factor for smooth coordinates updates.

Default

0.2

Optionalloop

loop?: boolean

Detects if need to loop the progress

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

OptionalstickOnResize

stickOnResize?: boolean

Stick to the nearest slide on window resize

Default

true

Optionalswipe

swipe?: boolean

Enable or disable swipe events

Default

true

OptionalswipeAxis

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

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

OptionalswipeLerp

swipeLerp?: number | false

Linear interpolation factor for smooth progress updates during swipe move. false means that the main lerp option will be used

Default

vevet.mobile ? 1 : 0.6

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

Settings

Member Visibility

On This Page

Properties