Methods

note

All Module methods are available in this class.

next

Navigate to the next slide.

const snap = new Snap({ container });

snap.next({ duration: 500 });

snap.next({ duration: 500, skip: 2 }); // skip two slides

prev

Navigate to the previous slide.

const snap = new Snap({ container });

snap.prev({ duration: 500 });

snap.prev({ duration: 500, skip: 2 }); // skip two slides

toCoord

Snap to a specific track coordinate.

const snap = new Snap({ container });

snap.toCoord(1365);

// with duration
snap.toCoord(1365, { duration: 250 });

// custom easing
snap.toCoord(1365, {
  duration: 250,
  easing: EaseInOutCubic,
});

// with callbacks
snap.toCoord(1365, {
  duration: 250,
  easing: EaseInOutCubic,
  onStart: () => console.log('start'),
  onUpdate: ({ progress, eased }) => console.log(progress, eased),
  onEnd: () => console.log('end'),
});

toSlide

Navigate to a slide by index (starting from 0).

const snap = new Snap({ container });

instance.toSlide(2);

// with duration
snap.toSlide(2, { duration: 250 });

// custom easing
snap.toSlide(2, {
  duration: 250,
  easing: EaseInOutCubic,
});

// with callbacks
snap.toSlide(2, {
  duration: 250,
  easing: EaseInOutCubic,
  onStart: () => console.log('start'),
  onUpdate: ({ progress, eased }) => console.log(progress, eased),
  onEnd: () => console.log('end'),
});


// define animation direction (loop mode only)
snap.toSlide(2, {
  direction: "prev"
});

render

Force coordinate recalculation and re-render slides.

const snap = new Snap({ container });

snap.render();

resize

Request a resize update.
If false is passed, the resize is handled with a debounce timeout.

const snap = new Snap({ container });

snap.resize(); // instant resize
snap.resize(false); // with debounce

stick

Snap to the nearest slide magnet.

const snap = new Snap({ container });

snap.stick();

getNearestMagnet

Return the nearest magnet relative to a target coordinate.

const snap = new Snap({ container });

const magnet = snap.getNearestMagnet(1234);

magnet.diff; // difference with current coordinate
magnet.magnet; // magnet coordinate
magnet.slide; // magnet slide instance

cancelTransition

Cancel the current transition to a target slide or coordinate.

const snap = new Snap({ container });

snap.cancelTransition();

track.clampTarget

Clamp the target value between the minimum and maximum track values.

const snap = new Snap({ container });

snap.track.clampTarget();

track.loopCoord

Wrap a coordinate between the minimum and maximum track values and return a normalized looped value.
See loop utilities.

const snap = new Snap({ container });

// when track.min=0 & track.max=1100
snap.track.loopCoord(0); // => 0
snap.track.loopCoord(1100); // => 0
snap.track.loopCoord(1101); // => 1
snap.track.loopCoord(-1101); // => 1099
snap.track.loopCoord(5000); // => 600

track.set

Instantly set the current and target track values without starting an animation.
After manually updating the values, you must call .render().

const snap = new Snap({ container });

snap.track.set(1350);

snap.render();