Simple Demos
Default active index
Vevet Snap supports a default active index. Provide activeIndex (zero-based) when initializing to open the carousel at a specific slide:
Variable Size
Snap supports slides of varying sizes - they don’t need to be equal in width or height.
Some slides may be larger than their container. In this case, they can be smoothly scrolled:
Vertical
Snap can operate in either horizontal or vertical orientation:
Centered
Snap slides can start from the top/left or be centered:
Loop
Any Snap carousel can be looped endlessly:
Gap
Snap supports custom gaps between slides. The gap can be set in px, rem, vw, vh or svh:
Grab cursor
Wheel
Snap supports wheel control:
Free wheel
The Snap wheel behavior may differ slightly. For example, after a swipe, the carousel snaps to the nearest magnet, but after a wheel scroll ends, it won't - that part is up to you:
Throttled wheel
Sometimes you may want to prevent scrolling through multiple slides at once - Vevet Snap provides automatic wheel throttling to handle that, which works well in most cases:
Hypersmooth
One of the best features is track value interpolation, which lets you make scrolling and swiping as smooth as you want - right out of the box:
Freemode
Snap freemode lets you ignore magnets when swiping or wheel scrolling ends:
Sticky freemode
Snap freemode also supports sticky mode. Users can scroll freely with inertia, but when their interaction ends, magnets take effect, snapping the carousel to the nearest slide:
Friction
Snap supports friction for both wheel and swipe interactions. Friction adds resistance to the user’s scrolling, pulling slides toward their magnets:
Edge Friction
Snap supports edge friction, making swipe interactions feel more natural and engaging. Edge friction adds resistance when swiping near the carousel’s edges:
Easing
You can customize your animation - use any easing you like:
Swipe No Follow
By default, Snap follows the user's swipe interaction. This behavior can be disabled, causing slides to change only after the interaction ends:
Reverse swipe
Both wheel and swipe speeds can be customized:
Progress
Snap is a powerful solution for custom carousels. It lets you track slide progress and animate them however you like: