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 nameArgumentsDescription
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.
touchStarteventEvent will be fired when user touch Swiper. Receives ‘touchstart’ event as an arguments.
touchMove(event)eventEvent will be fired when user touch and move finger over Swiper. Receives ‘touchmove’ event as an arguments.
touchMoveOppositeeventEvent will be fired when user touch and move finger over Swiper in direction opposite to direction parameter. Receives ‘touchmove’ event as an arguments.
sliderMoveeventEvent will be fired when user touch and move finger over Swiper and move it. Receives ‘touchmove’ event as an arguments.
touchEndeventEvent will be fired when user release Swiper. Receives ‘touchend’ event as an arguments.
clickeventEvent will be fired when user click/tap on Swiper after 300ms delay. Receives ‘touchend’ event as an arguments.
tapeventEvent will be fired when user click/tap on Swiper. Receives ‘touchend’ event as an arguments.
doubleTapeventEvent 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
progressprogressEvent 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
setTranslatetranslateEvent will be fired when swiper’s wrapper change its position. Receives current translate value as an arguments
setTransitiontransitionEvent 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

Leave a Comment

Your email address will not be published.