Callbacks

note

All Module callbacks are available in this class.

activeSlide

Triggered when the active slide changes.
The callback receives the active slide instance. See SnapSlide.

const snap = new Snap({
  container,
  onActiveSlide: (slide) => console.log(slide.index),
});

or:

const destruct = snap.on('activeSlide', (slide) => console.log(slide.index));

// Cancel the callback
destruct();

rafPause

Triggered when the requestAnimationFrame loop is paused.

const snap = new Snap({
  container,
  onRafPause: () => console.log('pause'),
});

or:

const destruct = snap.on('rafPause', () => console.log('pause'));

// Cancel the callback
destruct();

rafPlay

Triggered when the requestAnimationFrame loop resumes.

const snap = new Snap({
  container,
  onRafPlay: () => console.log('play'),
});

or:

const destruct = snap.on('rafPlay', () => console.log('play'));

// Cancel the callback
destruct();

reflow

Triggered when the carousel recalculates slides, sizes, or magnets.

const snap = new Snap({
  container,
  onReflow: () => console.log('reflow'),
});

or:

const destruct = snap.on('reflow', () => console.log('reflow'));

// Cancel the callback
destruct();

resize

Triggered when the carousel is resized.

const snap = new Snap({
  container,
  onResize: () => console.log('resize'),
});

or:

const destruct = snap.on('resize', () => console.log('resize'));

// Cancel the callback
destruct();

swipe

Triggered during swipe movement.

const snap = new Snap({
  container,
  onSwipe: (coord) => console.log(coord),
});

or:

const destruct = snap.on('swipe', (coord) => console.log(coord));

// Cancel the callback
destruct();

swipeStart

Triggered when a swipe starts.

const snap = new Snap({
  container,
  onSwipeStart: (coord) => console.log(coord),
});

or:

const destruct = snap.on('swipeStart', (coord) => console.log(coord));

// Cancel the callback
destruct();

swipeEnd

Triggered when a swipe ends.

const snap = new Snap({
  container,
  onSwipeEnd: (coord) => console.log(coord),
});

or:

const destruct = snap.on('swipeEnd', (coord) => console.log(coord));

// Cancel the callback
destruct();

timelineStart

Triggered on timeline animation start.

const snap = new Snap({
  container,
  onTimelineStart: () => console.log('start'),
});

or:

const destruct = snap.on('timelineStart', () => console.log('start'));

// Cancel the callback
destruct();

timelineUpdate

Triggered on timeline animation progress update.

const snap = new Snap({
  container,
  onTimelineUpdate: ({ progress, eased }) => console.log(progress, eased),
});

or:

const destruct = snap.on('timelineUpdate', ({ progress, eased }) => {
  console.log(progress, eased);
});

// Cancel the callback
destruct();

timelineEnd

Triggered when a timeline animation ends.

const snap = new Snap({
  container,
  onTimelineEnd: () => console.log('end'),
});

or:

const destruct = snap.on('timelineEnd', () => console.log('end'));

// Cancel the callback
destruct();

update

Triggered on every carousel coordinate update.

const snap = new Snap({
  container,
  onUpdate: () => console.log('update'),
});

or:

const destruct = snap.on('update', () => console.log('update'));

// Cancel the callback
destruct();

idle

Triggered when the carousel becomes idle — not swiping, interpolating, or transitioning.

const snap = new Snap({
  container,
  onIdle: () => console.log('idle'),
});

or:

const destruct = snap.on('idle', () => console.log('idle'));

// Cancel the callback
destruct();

wheel

Triggered on mouse wheel input.

const snap = new Snap({
  container,
  onWheel: (evt) => console.log(evt),
});

or:

const destruct = snap.on('wheel', (evt) => console.log(evt));

// Cancel the callback
destruct();

wheelStart

Triggered when wheel input starts.

const snap = new Snap({
  container,
  onWheelStart: () => console.log('start'),
});

or:

const destruct = snap.on('wheelStart', () => console.log('start'));

// Cancel the callback
destruct();

wheelEnd

Triggered when wheel input ends.

const snap = new Snap({
  container,
  onWheelEnd: () => console.log('end'),
});

or:

const destruct = snap.on('wheelEnd', () => console.log('end'));

// Cancel the callback
destruct();

swipeInertiaStart

Triggered when swipe inertia starts.

const snap = new Snap({
  container,
  onSwipeInertiaStart: () => console.log('start'),
});

or:

const destruct = snap.on('swipeInertiaStart', () => console.log('start'));

// Cancel the callback
destruct();

swipeInertiaEnd

Triggered when swipe inertia ends.

const snap = new Snap({
  container,
  onSwipeInertiaEnd: () => console.log('end'),
});

or:

const destruct = snap.on('swipeInertiaEnd', () => console.log('end'));

// Cancel the callback
destruct();

swipeInertiaCancel

Triggered when swipe inertia is canceled.

const snap = new Snap({
  container,
  onSwipeInertiaCancel: () => console.log('cancel'),
});

or:

const destruct = snap.on('swipeInertiaCancel', () => console.log('cancel'));

// Cancel the callback
destruct();

swipeInertiaFail

Triggered when swipe inertia fails to start.

const snap = new Snap({
  container,
  onSwipeInertiaFail: () => console.log('fail'),
});

or:

const destruct = snap.on('swipeInertiaFail', () => console.log('fail'));

// Cancel the callback
destruct();