After we initialize Slider we have its initialized instance in variable (like mySwiper variable in example above) with helpful methods and properties:
| Properties | |
|---|---|
| mySwiper.params | Object with passed initialization parameters |
| mySwiper.$el | Dom7 element with slider container HTML element. To get vanilla HTMLElement use mySwiper.el |
| mySwiper.$wrapperEl | Dom7 element with slider wrapper HTML element. To get vanilla HTMLElement use mySwiper.wrapperEl |
| mySwiper.slides | Dom7 array-like collection of slides HTML elements. To get specific slide HTMLElement use mySwiper.slides[1] |
| mySwiper.width | Width of container |
| mySwiper.height | Height of container |
| mySwiper.translate | Current value of wrapper translate |
| mySwiper.progress | Current progress of wrapper translate (from 0 to 1) |
| mySwiper.activeIndex | Index number of currently active slideNote, that in loop mode active index value will be always shifted on a number of looped/duplicated slides |
| mySwiper.realIndex | Index number of currently active slide considering duplicated slides in loop mode |
| mySwiper.previousIndex | Index number of previously active slide |
| mySwiper.isBeginning | true if slider on most “left”/”top” position |
| mySwiper.isEnd | true if slider on most “right”/”bottom” position |
| mySwiper.animating | true if swiper is in transition |
| mySwiper.touches | Object with the following touch event properties:mySwiper.touches.startXmySwiper.touches.startYmySwiper.touches.currentXmySwiper.touches.currentYmySwiper.touches.diff |
| mySwiper.clickedIndex | Index number of last clicked slide |
| mySwiper.clickedSlide | Link to last clicked slide (HTMLElement) |
| mySwiper.allowSlideNext | Disable / enable ability to slide to the next slides by assigning false/true to this property |
| mySwiper.allowSlidePrev | Disable / enable ability to slide to the previous slides by assigning false/true to this property |
| mySwiper.allowTouchMove | Disable / enable ability move slider by grabbing it with mouse or by touching it with finger (on touch screens) by assigning false/true to this property |
| Methods | |
| mySwiper.slideNext(speed, runCallbacks); | Run transition to next slidespeed – number – transition duration (in ms). OptionalrunCallbacks – boolean – Set it to false (by default it is true) and transition will not produce transition events. Optional |
| mySwiper.slidePrev(speed, runCallbacks); | Run transition to previous slidespeed – number – transition duration (in ms). OptionalrunCallbacks – boolean – Set it to false (by default it is true) and transition will not produce transition events. Optional |
| mySwiper.slideTo(index, speed, runCallbacks); | Run transition to the slide with index number equal to ‘index’ parameter for the duration equal to ‘speed’ parameter.index – number – index number of slidespeed – number – transition duration (in ms). OptionalrunCallbacks – boolean – Set it to false (by default it is true) and transition will not produce transition events. Optional |
| mySwiper.slideToLoop(index, speed, runCallbacks); | Does the same as .slideTo but for the case when used with enabled loop. So this method will slide to slides with realIndexmatching to passed indexindex – number – index number of original slidespeed – number – transition duration (in ms). OptionalrunCallbacks – boolean – Set it to false (by default it is true) and transition will not produce transition events. Optional |
| mySwiper.slideReset(speed, runCallbacks); | Reset swiper position to currently active slide for the duration equal to ‘speed’ parameter.speed – number – transition duration (in ms). OptionalrunCallbacks – boolean – Set it to false (by default it is true) and transition will not produce transition events. Optional |
| mySwiper.slideToClosest(speed, runCallbacks); | Reset swiper position to closest slide/snap point for the duration equal to ‘speed’ parameter.speed – number – transition duration (in ms). OptionalrunCallbacks – boolean – Set it to false (by default it is true) and transition will not produce transition events. Optional |
| mySwiper.updateAutoHeight(speed); | Force swiper to update its height (when autoHeight enabled) for the duration eqaul to ‘speed’ parameterspeed – number – transition duration (in ms). OptionalrunCallbacks – boolean – Set it to false (by default it is true) and transition will not produce transition events. Optional |
| mySwiper.update(); | You should call it after you add/remove slides manually, or after you hide/show it, or do any custom DOM modifications with SwiperThis method also includes subcall of the following methods which you can use separately:mySwiper.updateSize() – recalculate size of swiper containermySwiper.updateSlides() – recalculate number of slides and their offsets. Useful after you add/remove slides with JavaScriptmySwiper.updateProgress() – recalculate swiper progressmySwiper.updateSlidesClasses() – update active/prev/next classes on slides and bullets |
| mySwiper.detachEvents(); | Detach all events listeners |
| mySwiper.attachEvents(); | Atach all events listeners again |
| mySwiper.destroy(deleteInstance, cleanStyles); | Destroy slider instance and detach all events listeners, wheredeleteInstance – boolean – Set it to false (by default it is true) to not to delete Swiper instancecleanStyles – boolean – Set it to true (by default it is true) and all custom styles will be removed from slides, wrapper and container. Useful if you need to destroy Swiper and to init again with new options or in different direction |
| mySwiper.appendSlide(slides); | Add new slides to the end. slides could be HTMLElement or HTML string with new slide or array with such slides, for example:mySwiper.appendSlide('<div class="swiper-slide">Slide 10"</div>') mySwiper.appendSlide([ '<div class="swiper-slide">Slide 10"</div>', '<div class="swiper-slide">Slide 11"</div>' ]); |
| mySwiper.prependSlide(slides); | Add new slides to the beginning. slides could be HTMLElement or HTML string with new slide or array with such slides, for example:mySwiper.prependSlide('<div class="swiper-slide">Slide 0"</div>') mySwiper.prependSlide([ '<div class="swiper-slide">Slide 1"</div>', '<div class="swiper-slide">Slide 2"</div>' ]); |
| mySwiper.addSlide(index, slides); | Add new slides to the required index. slides could be HTMLElement or HTML string with new slide or array with such slides, for example:mySwiper.addSlide(1, '<div class="swiper-slide">Slide 10"</div>') mySwiper.addSlide(1, [ '<div class="swiper-slide">Slide 10"</div>', '<div class="swiper-slide">Slide 11"</div>' ]); |
| mySwiper.removeSlide(slideIndex); | Remove selected slides. slideIndex could be a number with slide index to remove or array with indexes, for example:mySwiper.removeSlide(0); //remove first slide mySwiper.removeSlide([0, 1]); //remove first and second slides |
| mySwiper.removeAllSlides(); | Remove all slides |
| mySwiper.setTranslate(translate); | Set custom css3 transform’s translate value for swiper wrapper |
| mySwiper.getTranslate(); | Get current value of swiper wrapper css3 transform translate |
| mySwiper.on(event, handler) | Add event listener |
| mySwiper.once(event, handler) | Add event listener that will be executed only once |
| mySwiper.off(event, handler) | Remove event listener for specified event |
| mySwiper.off(event) | Remove all listeners for specified event |
| mySwiper.unsetGrabCursor(); | Unset grab cursor |
| mySwiper.setGrabCursor(); | Set grab cursor |
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
thiskeyword 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 |
