Login With Github

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.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 slide

Note, 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.startX
  • mySwiper.touches.startY
  • mySwiper.touches.currentX
  • mySwiper.touches.currentY
  • mySwiper.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 slide
  • speed - number - transition duration (in ms). Optional
  • runCallbacks - 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 slide
  • speed - number - transition duration (in ms). Optional
  • runCallbacks - 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 slide
  • speed - number - transition duration (in ms). Optional
  • runCallbacks - 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 index
  • index - number - index number of original slide
  • speed - number - transition duration (in ms). Optional
  • runCallbacks - 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). Optional
  • runCallbacks - 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). Optional
  • runCallbacks - 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' parameter
  • speed - number - transition duration (in ms). Optional
  • runCallbacks - 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 Swiper

This method also includes subcall of the following methods which you can use separately:

  • mySwiper.updateSize() - recalculate size of swiper container
  • mySwiper.updateSlides() - recalculate number of slides and their offsets. Useful after you add/remove slides with JavaScript
  • mySwiper.updateProgress() - recalculate swiper progress
  • mySwiper.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, where
  • deleteInstance - boolean - Set it to false (by default it is true) to not to delete Swiper instance
  • cleanStyles - 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

0 Comment

temp