Login With Github

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

0 Comment

temp