Swiper API: Events

Swiper comes with a bunch of useful events you can listen. Events can be assigned in two ways:

Using on parameter on swiper initialization:

var mySwiper = new Swiper('.swiper-container', {
  // ...
  on: {
    init: function () {
      console.log('swiper initialized');
    },
  },
};

Using on method after swiper initialization.

var mySwiper = new Swiper('.swiper-container', {
  // ...
};
mySwiper.on('slideChange', function () {
  console.log('slide changed');
});

Please note, that this keyword within event handler always points to Swiper instance

Event name	Arguments	Description
init		Event will be fired right after Swiper initialization. Note that with swiper.on('init') syntax it will work only in case you set init: falseparameter:var swiper = new Swiper('.swiper-container', { init: false, // other parameters }) swiper.on('init', function() { /* do something */ }); // init Swiper swiper.init();Otherwise use it as the parameter:var swiper = new Swiper('.swiper-container', { // other parameters on: { init: function () { /* do something */ }, } });
beforeDestroy		Event will be fired right before Swiper destroyed
slideChange		Event will be fired when currently active slide is changed
slideChangeTransitionStart		Event will be fired in the beginning of animation to other slide (next or previous).
slideChangeTransitionEnd		Event will be fired after animation to other slide (next or previous).
slideNextTransitionStart		Same as “slideChangeTransitionStart” but for “forward” direction only
slideNextTransitionEnd		Same as “slideChangeTransitionEnd” but for “forward” direction only
slidePrevTransitionStart		Same as “slideChangeTransitionStart” but for “backward” direction only
slidePrevTransitionEnd		Same as “slideChangeTransitionEnd” but for “backward” direction only
transitionStart		Event will be fired in the beginning of transition.
transitionEnd		Event will be fired after transition.
touchStart	event	Event will be fired when user touch Swiper. Receives ‘touchstart’ event as an arguments.
touchMove(event)	event	Event will be fired when user touch and move finger over Swiper. Receives ‘touchmove’ event as an arguments.
touchMoveOpposite	event	Event will be fired when user touch and move finger over Swiper in direction opposite to direction parameter. Receives ‘touchmove’ event as an arguments.
sliderMove	event	Event will be fired when user touch and move finger over Swiper and move it. Receives ‘touchmove’ event as an arguments.
touchEnd	event	Event will be fired when user release Swiper. Receives ‘touchend’ event as an arguments.
click	event	Event will be fired when user click/tap on Swiper after 300ms delay. Receives ‘touchend’ event as an arguments.
tap	event	Event will be fired when user click/tap on Swiper. Receives ‘touchend’ event as an arguments.
doubleTap	event	Event will be fired when user double tap on Swiper’s container. Receives ‘touchend’ event as an arguments
imagesReady		Event will be fired right after all inner images are loaded. updateOnImagesReady should be also enabled
progress	progress	Event will be fired when Swiper progress is changed, as an arguments it receives progress that is always from 0 to 1
reachBeginning		Event will be fired when Swiper reach its beginning (initial position)
reachEnd		Event will be fired when Swiper reach last slide
fromEdge		Event will be fired when Swiper goes from beginning or end position
setTranslate	translate	Event will be fired when swiper’s wrapper change its position. Receives current translate value as an arguments
setTransition	transition	Event will be fired everytime when swiper starts animation. Receives current transition duration (in ms) as an arguments
resize		Event will be fired on window resize right before swiper’s onresize manipulation