paused
after returning from hidden tabtouchEventsTarget
defaults back to container
touchcancel
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 false
click
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)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 .off
observeSlideChildren
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 slidesPerView
breakpointsInverse
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 noSwipingClass
preventIntercationOnTransition
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 draggable
watchOverflow
(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 iOSdragSize
iOSEdgeSwipeDetection
will also be in consideration with right-edge swipefreeModeSticky
behavior in RTL modebreakpoint
event on breakpoint changenoSwiping
parameterslidesPerGroup
parameterbreakpoints
document
objectslidesPerView: 'auto'
build-dev
-> build:dev
, build-prod
-> build:prod
beforeResize
eventrealIndex
calculation orderingswiper.module.js
-> swiper.esm.bundle.js
(exported by default)swiper.modular.js
-> swiper.esm.js
swiper.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 3
zoomMin
- minimum image zoom multiplier, by default is 1
zoomToggle
- 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)
callbackmousewheelControl
autoHeight: true
parametersetWrapperTranslate
Added 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 centeredSlides
slidesPerView * slidesPerColumn
with slidesPerColumnFill: 'row'
srcset
with lazy loading using data-srcset
attributeWebkitCSSMatrix
slideToClickedSlide
with loop
and centeredSlides
freeModeMinimumVelocity
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
)centeredSlides
iOSEdgeSwipeDetection
(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 span
roundLengths
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-container
onlyExternal
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...
callbacksslidesPerGroup
lazyLoading
, lazyLoadingInPrevNext
, lazyLoadingOnTransitionStart
(all disabled by default)onLazyImageLoad
and onLazyImageReady
updateOnImages
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 watchSlidesVisibility
crossFade
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: touch
slidesPerColumn
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