onAfterResize and onBeforeResize callbacksonKeyPress callback when keyboard control is usedgulp custom -zoom,effects,lazy-loading
<div class="swiper-slide">
<div class="swiper-zoom-container">
<img src="path/to/image">
</div>
</div>
zoom - enable zoom functionalityzoomMax - maximum image zoom multiplier, by default is 3zoomMin - minimum image zoom multiplier, by default is 1zoomToggle - enable/disable zoom-in by slide's double tapzoomMax can be also overridden for specific slide by using data-swiper-zoom attributeswiper.enableTouchControl() and swiper.disableTouchControl() methods to enable disable touch control (it toggles onlyExternal parameter)swiper.realIndex property in addition to swiper.activeIndex that returns index of active slide considering loophistory parameter. It uses history pushState to set active slide URLhashnavWatchState parameter to navigate through slides (when hashnav is enabled) by browser history or by setting directly hash on document locationreplaceState parameter that work in addition to hashnav or history to replace current url state with the new one instead of adding it to historys.unsetGrabCursor() and s.setGrabCursor() to enable/disable grab cursorsimulateTouch:false
normalizeSlideIndex parameter to improve work of controller (see #1766)lazyLoadingInPrevNextAmount now works with slidesPerView: 'auto'passiveListeners parameter to use passive event listeners to improve scrolling performance on mobile devices. Enabled by defaultfreeModeMomentumVelocityRatio parameter to control moment velocitydata-swiper-autoplay attribute on themsizes responsive images attributemousewheelEventsTarged parameter (by default 'container') where you can specify mousewheel events targetonScroll event/callback that triggers when swiping/scrolling happens with mousewheeltouchReleaseOnEdges parameter to release touch events on slider edge position (beginning, end) and allow for further page scrollingpaginationBulletRender now accepts swiper instance as a first argument, paginationBulletRender(index, className) -> paginationBulletRender(swiper, index, className)uniqueNavElements parameter. If enabled (by default) and navigation elements' parameters passed as the string (like .pagination) then Swiper will look for such elements through child elements first. Applies for pagination, prev/next buttons and scrollbaronPaginationRendered callback. Will be fired after pagination elements generated and added to DOM.reLoop() method, which combines .destroyLoop() + .createLoop() methods with additional positioning fixes. Useful to call after you have changed slidesPerView parameter, it will dynamically recreate duplicated slides required for loop.nextButton and .prevButton properties with Dom7/jQuery element with next/prev button HTML elementslidesPerView/Group parameterspaginationType - type of pagination. Can be 'bullets' (default) or 'fraction' or 'progress' or 'custom'paginationFractionRender(swiper, currentClass, totalClass) - custom function to render "fraction" type paginationpaginationProgressRender(swiper, progressbarClass) - custom function to render "progress" type paginationpaginationCustomRender(swiper, current, total) - custom function to render "custom" type paginationlazyLoadingInPrevNextAmount parameter allows to lazy load images in specified amount of next/prev slidesautoplayStopOnLast parameter (true by default) tells to autoplay should it stop on last slide or start from first slideonAutoplay(swiper) callbackmousewheelControlautoHeight: true parametersetWrapperTranslateAdded responsive breakpoints support using new breakpoints parameter. Now you can specify different slidesPerView and other similar parameters for different sizes:
slidesPerView: 5,
spaceBetween: 50,
breakpoints: {
1024: {
slidesPerView: 4,
spaceBetween: 40
},
768: {
slidesPerView: 3,
spaceBetween: 30
},
320: {
slidesPerView: 1,
spaceBetween: 10
}
}
New callbacks: onSlideNextStart, onSlideNextEnd, onSlidePrevStart, onSlidePrevEnd
Added Meteor package meteor add nolimits4web:swiper
Fixed issue with mouse touchMove/End callbacks firing all the time
Fixed issue with mousewheel in Chrome
Minor fixes
undefined-src imagesslideToClickedSlide with loop and centeredSlidesslidesPerView * slidesPerColumn with slidesPerColumnFill: 'row'srcset with lazy loading using data-srcset attributeWebkitCSSMatrixslideToClickedSlide with loop and centeredSlidesfreeModeMinimumVelocity parameter to set minimum required touch velocity to trigger free mode momentumscrollbarDraggable - (boolean) by default is false. Allows to enable draggable scrollbarscrollbarSnapOnRelease - (boolean) by default is false. Control slider snap on scrollbar releaseslidesPerView: 'auto' and enabled loop:true mode to set loopedSlides to the amount of slides by default (if not specified)mousewheelSensitivity: 1 parameter allows to tweak mouse wheel sensitivityallowSwipeToNext/allowSwipeToPrev)centeredSlidesiOSEdgeSwipeDetection (by default is false) - enable ios edge detection and release Swiper eventsiOSEdgeSwipeThreshold (default value is 20) - area in px from left edge of screen to release eventspaginationBulletMessage: 'Go to slide {{index}}'controlBy which can be 'slide' (by default) or 'container'. Defines a way how to control another slider: slide by slide or depending on all slides/container (like before)controlBy: 'slide' (default) mode will respect grid of each otherpaginationElement parameter defines which HTML tag will be use to represent single pagination bullet. By default it is spanroundLengths parameter (by default is false) to round values of slides width and height to prevent blurry texts on usual resolution screensslidesOffsetBefore: 0 and slidesOffsetAfter: 0 (in px) parameters to add additional slide offset within a container.swiper-containeronlyExternal during touchmoveswiper.jquery.umd.js version for the environment where both Swiper and jQuery included as modulesmousewheelReleaseOnEdges - will release mousewheel event and allow page scrolling when swiper is on edge positions (in the beginning or in the end)mousewheelInvert - option to invert mousewheel slidesslidesPerView > 1slidesPerColumn > 1)width and height parameters to force Swiper size, useful when it is hidden on intializationdata-background attribute on required elementsfreeModeSticky parameter) which will snap to slides positions in free mode.destroy(deleteInstance, cleanupStyles) method now has second cleanupStyles argument, when passed - 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 directiona11y: false - enable accessibilityprevSlideMessage: 'Previous slide' - message for screen readers for previous buttonnextSlideMessage: 'Next slide' - message for screen readers for next buttonfirstSlideMessage: 'This is the first slide' - message for screen readers for previous button when swiper is on first slidelastSlideMessage: 'This is the last slide' - message for screen readers for next button when swiper is on last slide.on(event, handler) - add event/callback.off(event, handler) - remove this event/callback.once(event, handler) - add event/callback that will be executed only oncesetWrapperSize (be default it is false) to provide better compatibility with browser without flexbox support. Enabled this option and plugin will set width/height on swiper wrapper equal to total size of all slidesvirtualTranslate parameter. When it is enabled swiper will be operated as usual except it will not move. Useful when you may need to create custom slide transitiononLazyImage... callbacksslidesPerGrouplazyLoading, lazyLoadingInPrevNext, lazyLoadingOnTransitionStart (all disabled by default)onLazyImageLoad and onLazyImageReadyupdateOnImages ready split into 2 parameters:
preloadImages (by default is true) - to preload all images on swiper initupdateOnImages (by default is true) - update swiper when all images loadedonObserverUpdate callback function to be called after updates by ovserverpaginationBulletRender parameter that accepts function which allow custom pagination elements layoutrunCallbacksOnInit parameterwatchVisibility parameter renamed to watchSlidesVisibilitycrossFade option for fade effect.update method improved to fully cover what onResize do for full and correct updateswiper.touches object with the following properties: startX, startY, currentX, currentY, diff.removeSlide(index) or .removeSlide([indexes]) - to remove selected slides.removeAllSlides() - to remove all slidesoverflow: auto with -webkit-overflow-scrolling: touchslidesPerColumn optionborder-box now, so it is possible to use borders and paddings directly on slidesslidesPerView: 'auto') now gives more freedom, you can even specify slides sizes in % and use margins on them