swiper/types! in classes (0cfbc53), closes #4812focusableElements prop type (7f1b1b9), closes #4822slidesPerColumn breakpoint (c94a115), closes #4044HTMLElement (close #4787) (#4788) (ca4f6b8)module component prop (#4768) (ddaa069), closes #4767class on wrapper element (1285195), closes #4679slidesPerColum changed (1ced4f7), closes #4658enabled prop (76dd086), closes #4633wrapperClass to be multiple classes (0d578b0), closes #4680focusableElements configurable (6ff0866), closes #4677window.matchMedia to detect window width for breakpoints (1a4afe0), closes #4682createElements: true parameter (#4507) (aef2865)disableOnInteraction and pauseOnMouseEnter, it will stop autoplay on interaction (e7e5031), closes #4598pauseOnMouseEnter parameter to pause autoplay on mouse enter over container (1a10247), closes #4482<swiper> component (66c5a55)a11y.slideRole parameter for custom slide role (097109f), closes #4435root parameter to avoid issues with root path detection (e6d1202), closes #3205React.StrictModeswiper.setProgress method to set whole Swiper translate progress (from 0 to 1)aria-roledescription attribute name (1b73c3b), closes #4371getComputedStyle helper (9698e58), closes #4337disabled prop on nav element if it is a <button> element (7536fbd), closes #4312false #4181 (ffedb6b)scrollbar.el will throw an error on destroyzoom prop on slides, e.g. <ng-template swiperSlide [zoom]="true">pagination.eledgeSwipeDetection parameter now can receive string 'prevent' to prevent system swipe-back navigationslidesPerView last slide never received "active" class/statepostinstall scriptpostinstall script.css files are also available for all components.svelte files in package[config] support to pass all Swiper params as single object (https://github.com/nolimits4web/swiper/commit/f7d21c5f49860fdca62a31ccb62b01a790fd0df3)(index) active slide binding (https://github.com/nolimits4web/swiper/commit/86670bd7c1b95268919147662383804e664011a7)6.4.0.svelte componentsslideTo's index parameterMaximum recursive updatesCore
Core
containerMessage, containerRoleDescriptionMessage and itemRoleDescriptionMessage (#3834 thanks to @jenemde)React
SwiperSlide component requires unique virtualIndex to be set so Swiper can know which slide is rendered exactlyVue
SwiperSlide was not rendered if used with v-forSwiperSlide component requires unique virtualIndex to be set so Swiper can know which slide is rendered exactlyAll new Swiper Svelte components:
<Swiper spaceBetween="{50}" slidesPerView="{3}">
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
...
</Swiper>
<script>
import { Swiper, SwiperSlide } from 'swiper/svelte';
</script>
All new Swiper Vue.js (v3) components:
<template>
<swiper :space-between="50" :slides-per-view="3">
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
...
</swiper>
</template>
<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
export default {
components: {
Swiper,
SwiperSlide,
},
};
</script>
useLayoutEffect warning in Next.jsthresholdDelta and thresholdTime (#3720).less files (#3724)sideEffects causing some bundlers to not include imported styles (#3708)SwiperSlide accepts render function with isActive, isVisible, isPrev, isNext, isDuplicate props:<Swiper>
<SwiperSlide>
{({ isActive }) => <div>Current slide is {isActive ? 'active' : 'not active'}</div>}
</SwiperSlide>
<SwiperSlide>...</SwiperSlide>
...
</Swiper>
__proto__ setters/getterspagination.el, scrollbar.el, navigation.nextEl and navigation.prevEl are passed from later-available refsCore
$colors var in Navigation and PaginationReact
New NPM package structure
All scripts transpiled to ES5
New and renamed files (BREAKING CHANGE):
swiper.less - core Swiper LESSswiper.scss - core Swiper SCSSswiper-bundle.css - Swiper bundle CSSswiper-bundle.js - Swiper bundle JavaScript in UMD formatswiper-bundle.cjs.js - Swiper bundle JavaScript in CommonJS formatswiper-bundle.esm.js - Swiper bundle JavaScript in ESM formatswiper.cjs.js - Swiper core JavaScript in CommonJS formatswiper.esm.js - Swiper core JavaScript in ESM formatFollowing imports are now available
import Swiper from 'swiper' - imports core versionimport Swiper from 'swiper/bundle' - imports bundle versionimport Swiper from 'swiper/core' - imports core versionComponents can be imported from core version using named imports, or using direct import:
import { Navigation } from 'swiper';
// or
import Navigation from 'swiper/components/navigation';
// and styles (Less or SCSS only)
import 'swiper/components/navigation/navigation.less';
Full server-side rendering support (SSR) with new parameters:
userAgent - device user agent, required for some initial detectionurl - required to correctly detect and set initial slide if Hash Navigation or History modules are usedNew loopPreventsSlide boolean parameter (by default enabled), that prevents slidePrev/Next transitions while transition is in progress
Full support for Node.js DOM libraries like JSDOM and Domino
Added new onAny(callback) listener to listen for any swiper event
All events now emit swiper instance as a first argument (BREAKING CHANGE)
Added official TypeScript definitions
Updated to use next generation dom7 and ssr-window libraries
All new Swiper React components:
import { Swiper, SwiperSlide } from 'swiper/react';
export default () => {
return (
<Swiper
spaceBetween={50}
slidesPerView={3}
onSwiper={(swiper) => console.log(swiper)}
onSlideChange={() => console.log('slide change')}
>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
...
</Swiper>
);
};
pageUpDown to enable/disable pageUp and pageDown keys (enabled by default)UIWebView text from codeslideTo to last slide when it shouldn'tforceToAxis also inverted scrollingscale parameter (#3598)uniqueNavElements (#3590)hashChange and hashSet events (#3557)<picture> lazy loading (#3560)ssr-window and dom7 dependencies to latest versionspaginationBulletMessage (#3540, #3541)thumbs.autoScrollOffset parameter that allows to set on what thumbs active slide from edge. It should automatically move scroll thumbscssMode behavior in RTL layoutcenteredSlides enabledzoom.in() API (#3451)<picture> element (#3456)swiper-zoom-target class to such elementsstretch parameter now can be set in % (#3468)label to list of form events to keep clicks on it (#3407)slidesPerGroupSkip behavior (#3361)beforeLoopFix and loopFixupdateOnWindowResize (by default true) that will update/recalc swiper on window resize/orientationchange--swiper-theme-color variable when not building from source (#3334).once could be called more than once (#3322)multipleActiveThumbs (by default true) option to control whether multiple thumbnail slides may get activated or not.centeredSlidesBounds parameter that when enabled will keep first and last slides at boundsfreeMode could break position on resize (#2708, #3303)freeModeSticky (#3302)watchOverflow and slidesOffsetBefore/slidesOffsetAfter couldn't work together (#3291)translateTo method #3268loop: true #3255slidesPerView could break loop mode (#3225 by @robpop)paused after returning from hidden tabtouchEventsTarget defaults back to containertouchcancel event #3219slidesPerColumnFill: 'row' modecssMode: true). It doesn't support all of Swiper's features, but potentially should bring a much better performance in simple configurationsbreakpointsInverse parameter has been removed and now breakpoints behave like with breakpointsInverse: true before.touchMoveStopPropagation parameter now defaults to falseclick event won't be fired with 300ms delay anymore. Now it will be fired at the same time as tap eventslidesPerColumnFill: 'column' it now uses flex-direction: column layout which requires specified height on swiper-containertouchEventsTarget now defaults to wrapper (rather than container like before)slidesPerColumn now can be used with breakpoints--swiper-theme-color: #007aff;es module "tree-shake-ability"swiper.esm.browser.bundle.js package that can be used directly in browser (import Swiper from 'swiper.esm.browser.bundle.js')--swiper-preloader-color CSS custom property (which is defaults to --swiper-theme-color)--swiper-pagination-color property (which is defaults to --swiper-theme-color)--swiper-navigation-color property (which is defaults to --swiper-theme-color)--swiper-navigation-size (defaults to 44px) it is now possible to change size of the navigation buttons (and icons)slidesPerColumnFill: '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-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:falsenormalizeSlideIndex 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 used 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 observerpaginationBulletRender 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