Swiper API: Slider Methods and Properties

After we initialize Slider we have its initialized instance in variable (like mySwiper variable in example above) with helpful methods and properties:

Properties
mySwiper.paramsObject with passed initialization parameters
mySwiper.$elDom7 element with slider container HTML element. To get vanilla HTMLElement use mySwiper.el
mySwiper.$wrapperElDom7 element with slider wrapper HTML element. To get vanilla HTMLElement use mySwiper.wrapperEl
mySwiper.slidesDom7 array-like collection of slides HTML elements. To get specific slide HTMLElement use mySwiper.slides[1]
mySwiper.widthWidth of container
mySwiper.heightHeight of container
mySwiper.translateCurrent value of wrapper translate
mySwiper.progressCurrent progress of wrapper translate (from 0 to 1)
mySwiper.activeIndexIndex number of currently active slideNote, that in loop mode active index value will be always shifted on a number of looped/duplicated slides
mySwiper.realIndexIndex number of currently active slide considering duplicated slides in loop mode
mySwiper.previousIndexIndex number of previously active slide
mySwiper.isBeginningtrue if slider on most “left”/”top” position
mySwiper.isEndtrue if slider on most “right”/”bottom” position
mySwiper.animatingtrue if swiper is in transition
mySwiper.touchesObject with the following touch event properties:mySwiper.touches.startXmySwiper.touches.startYmySwiper.touches.currentXmySwiper.touches.currentYmySwiper.touches.diff
mySwiper.clickedIndexIndex number of last clicked slide
mySwiper.clickedSlideLink to last clicked slide (HTMLElement)
mySwiper.allowSlideNextDisable / enable ability to slide to the next slides by assigning false/true to this property
mySwiper.allowSlidePrevDisable / enable ability to slide to the previous slides by assigning false/true to this property
mySwiper.allowTouchMoveDisable / 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

Leave a Comment

Your email address will not be published.