slidesPerColumFill: 'row' now considers groups (#3077)indexOf of undefined' that sometimes occurs on use of thumbnailsPageUp/PageDown keybindings.swiper.changeDirection() method to change direction from horizontal to vertical (and back) dynamicallydirection parameter can be used in breakpointsswiper.virtual.appendSlide now accepts array of slides to addswiper.virtual.prependSlide now accepts array of slides to prependswiper.virtual.removeSlide(indexes) to remove virtual selected slidesswiper.virtual.removeAllSlides() to remove all virtual slidesnavigationHide and navigationShow events when on nav hide/showpaginationHide and paginationShow events when on pagination hide/show.once bound event could still be there after unbinding it with .offobserveSlideChildren parameter to enable auto update on slide children updatezoomChange event with scale, imageEl and slideEl argumentstouchStartForcePreventDefault parameter to force touch start event prevent defaultcenterInsufficientSlides parameter to center slides if the amount of slides less than slidesPerViewbreakpointsInverse parameter (boolean), if enabled then it will count breakpoints in reversed direction, e.g. will override parameters if window width is more than specified breakpointaddSlidesBefore and addSlidesAfter parameters to increase amount of pre-rendered slidesiOSEdgeSwipeThreshold parameter renamed to just edgeSwipeThreshold. Old iOSEdgeSwipeThreshold name is still supportedaddSlide(index, slide) method to add slide at required position. Thanks to @kochizufanformatFractionCurrent(number) parameter to format current number in Fraction paginationformatFractionTotal(number) parameter to format total number in Fraction paginationswipeBack sometimes slides to wrong slideiOSEdgeSwipeDetection. Thanks to @langjunconsole.log cleanup.update() methodprogressbarOpposite parameter to make pagination progressbar opposite to direction parameter, means vertical progressbar for horizontal swiper direction and horizontal progressbar for vertical swiper directionloop + freeMode for loop not being set correctlyswiper.updateAutoHeight(speed) now supports speed parameter to resize swiper wrapper with durationfreeModeSticky not being able to snap to closest snap pointswiper.slideToClosest() method to slide to closest snap point when it is somewhere in betweennoSwipingSelector parameter that can be used instead of noSwipingClasspreventIntercationOnTransition parameter to prevent interaction during slice change transition.slideToLoop method to be used in loop modeslideChange events being fired when slide wasn't actually changedsimulateTouch for desktops when it is draggablewatchOverflow (disabled by default). When enabled Swiper will be disabled and hide navigation buttons on case there are not enough slides for slidingreverseDirection to enable autoplay in reverse directionwaitForTransition parameter when autoplay will wait for wrapper transition to continue (enabled by default). Can be disabled in case of using Virtual Translate when your slider may not have transitiononlyInViewport parameter (enabled by default). When enabled it will control sliders that are currently in viewporttouchReleaseOnEdges on iOSdragSizeiOSEdgeSwipeDetection will also be in consideration with right-edge swipefreeModeSticky behavior in RTL modebreakpoint event on breakpoint changenoSwiping parameterslidesPerGroup parameterbreakpointsdocument objectslidesPerView: 'auto'build-dev -> build:dev, build-prod -> build:prodbeforeResize eventrealIndex calculation orderingswiper.module.js -> swiper.esm.bundle.js (exported by default)swiper.modular.js -> swiper.esm.jsswiper.module.js - swiper bundle for import Swiper from 'swiper'swiper.modular.js - modular version for using Swiper with required components onlyscripts/build-config.js for creating custom Swiper build with required components and custom color themeonAfterResize and onBeforeResize callbacksonKeyPress callback when keyboard control is usedgulp custom -zoom,effects,lazy-loadingNew zoom functionality that enables double tap and pinch to zoom slide's inner image:
Required slide layout for zoom:
<div class="swiper-slide">
<div class="swiper-zoom-container">
<img src="path/to/image">
</div>
</div>
New zoom parameters:
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 attribute
New swiper.enableTouchControl() and swiper.disableTouchControl() methods to enable disable touch control (it toggles onlyExternal parameter)
New swiper.realIndex property in addition to swiper.activeIndex that returns index of active slide considering loop
New History API with new history parameter. It uses history pushState to set active slide URL
New hashnavWatchState parameter to navigate through slides (when hashnav is enabled) by browser history or by setting directly hash on document location
New replaceState parameter that work in addition to hashnav or history to replace current url state with the new one instead of adding it to history
New methods s.unsetGrabCursor() and s.setGrabCursor() to enable/disable grab cursor
Draggable Scrollbar now works when simulateTouch:false
New normalizeSlideIndex parameter to improve work of controller (see #1766)
lazyLoadingInPrevNextAmount now works with slidesPerView: 'auto'
New passiveListeners parameter to use passive event listeners to improve scrolling performance on mobile devices. Enabled by default
New freeModeMomentumVelocityRatio parameter to control moment velocity
Now it is possible to specify autoplay delay for every (or specific) slides by using data-swiper-autoplay attribute on them
Lazy loading now also respects sizes responsive images attribute
Improved mousewheel cross browser behavior (see #1797)
New mousewheelEventsTarged parameter (by default 'container') where you can specify mousewheel events target
New onScroll event/callback that triggers when swiping/scrolling happens with mousewheel
New touchReleaseOnEdges parameter to release touch events on slider edge position (beginning, end) and allow for further page scrolling
Multirow (slidesPerColumn) support for vertical direction, which is in this case becomes multicolumn
paginationBulletRender now accepts swiper instance as a first argument, paginationBulletRender(index, className) -> paginationBulletRender(swiper, index, className)
New "swiper-slide-duplicate-active", "swiper-slide-duplicate-next", "swiper-slide-duplicate-prev" classes that will be added in loop mode to the slides representing duplicated looped slides
All css classes are now configurable via new parameters: lazyLoadingClass, notificationClass, containerModifierClass, paginationClickableClass, paginationModifierClass, lazyStatusLoadingClass, lazyStatusLoadedClass, lazyPreloaderClass, notificationClass, preloaderClass, zoomContainerClass, slideDuplicateActiveClass, slideDuplicateNextClass, slideDuplicatePrevClass
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