- Fixed Zoom for RTL
- Improved slideToClickedSlide behavior when loop is enabled
- Minor fixes
- Custom build available. Now you can create custom swiper build using the folowing modules: effects, lazy-load, scrollbar, controller, hashnav, history, keyboard, mousewheel, parallax, zoom, a11y. Using cli
gulp custom -zoom,effects,lazy-loading
- New 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 is3
zoomMin
- minimum image zoom multiplier, by default is1
zoomToggle
- enable/disable zoom-in by slide's double tap
zoomMax
can be also overridden for specific slide by usingdata-swiper-zoom
attribute
- Required slide layout for zoom:
- New
swiper.enableTouchControl()
andswiper.disableTouchControl()
methods to enable disable touch control (it togglesonlyExternal
parameter) - New
swiper.realIndex
property in addition toswiper.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()
ands.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 withslidesPerView: '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 acceptsswiper
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
- New
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 scrollbar - New
onPaginationRendered
callback. Will be fired after pagination elements generated and added to DOM - New
.reLoop()
method, which combines.destroyLoop()
+.createLoop()
methods with additional positioning fixes. Useful to call after you have changedslidesPerView
parameter, it will dynamically recreate duplicated slides required for loop - New
.nextButton
and.prevButton
properties with Dom7/jQuery element with next/prev button HTML element - Fixed not working mousewheel control in IE 11
- Fixed issue with lazy loading images not being recalculated after window resize
- Fixed issues when using loop with breakpoints changing
slidesPerView/Group
parameters - Numerous minor fixes
- New 3D Flip effect. Can be enabled with `effect: 'flip' parameter
- New types of pagination with new parameters:
paginationType
- 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 pagination
- New
lazyLoadingInPrevNextAmount
parameter allows to lazy load images in specified amount of next/prev slides - New
autoplayStopOnLast
parameter (true
by default) tells to autoplay should it stop on last slide or start from first slide - New
onAutoplay(swiper)
callback - Minor fixes
- Fixed issue with using HTMLElements for next/prevButton parameters with breakpoints
- Fixed issue with not working Auto Height when using Controller
- Fixed issue in RTL layout using
mousewheelControl
- Fixed issue in RTL layout using Parallax
- New "Auto Height" mode when container/wrapper adopts to the height of currently active slide. Can be enabled with
autoHeight: true
parameter - Fixed issue with break points in FireFox
- Fixed issue with wrong slides position when using effects
- Fixed issue with none-updated scroll bar after using
setWrapperTranslate
- Minor fixes
-
Added responsive breakpoints support using new
breakpoints
parameter. Now you can specify differentslidesPerView
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
- Fixed issue with lazy loading trying to download
undefined
-src images - Fixed lazy loading on slides using jQuery version
- Fixed issue with
slideToClickedSlide
withloop
andcenteredSlides
- Fixed issue with wrong slides fill when number of slides less than
slidesPerView * slidesPerColumn
withslidesPerColumnFill: 'row'
- Minor fixes
- Added support for images
srcset
with lazy loading usingdata-srcset
attribute - Fixed new Chrome errors with
WebkitCSSMatrix
- Fixed issue with
slideToClickedSlide
withloop
andcenteredSlides
- New
freeModeMinimumVelocity
parameter to set minimum required touch velocity to trigger free mode momentum - Ability to make the Scrollbar draggable using new paramaters:
scrollbarDraggable
- (boolean) by default isfalse
. Allows to enable draggable scrollbarscrollbarSnapOnRelease
- (boolean) by default isfalse
. Control slider snap on scrollbar release
- Minor fixes
- Fixed issues with loop and mousewheel when swiper stopped on last slide
- Imporved mouse wheel behavior in latest Chrome
- Fixed issue with
slidesPerView: 'auto'
and enabledloop:true
mode to setloopedSlides
to the amount of slides by default (if not specified) - New
mousewheelSensitivity: 1
parameter allows to tweak mouse wheel sensitivity - Fixed issue with updating swiper when swiping is locked (with
allowSwipeToNext
/allowSwipeToPrev
) - Fixed issue with wrong calculating of "visible" slides with enabled
centeredSlides
- CSS fixes for 3D effects
- New options to release Swiper events for swipe-to-go-back work in iOS UIWebView with two options:
iOSEdgeSwipeDetection
(by default isfalse
) - enable ios edge detection and release Swiper eventsiOSEdgeSwipeThreshold
(default value is20
) - area inpx
from left edge of screen to release events
- Improved source maps
- Minor fixes
- Accessibility (a11y)
- Fixed issue with wrong buttons labels
- Added support for pagination bullets
- New accessibility parameter for pagination label
paginationBulletMessage: 'Go to slide {{index}}'
- Controler
- New parameter
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) - Now controllers in
controlBy: 'slide'
(default) mode will respect grid of each other
- New parameter
- Pagination
- New
paginationElement
parameter defines which HTML tag will be use to represent single pagination bullet. By default it isspan
- New
- New
roundLengths
parameter (by default isfalse
) to round values of slides width and height to prevent blurry texts on usual resolution screens - New
slidesOffsetBefore: 0
andslidesOffsetAfter: 0
(in px) parameters to add additional slide offset within a container - Correct calculation for slides size when use CSS padding on
.swiper-container
- Fixed issue with not working onResize handler when swipes are locked
- Fixed issue with "jumping" effect when you disable
onlyExternal
during touchmove - Fixed issue when slider goes to previos slide from last slide after window resize
- Added new
swiper.jquery.umd.js
version for the environment where both Swiper and jQuery included as modules - Minor fixes
- Fixed issue with wrong active index and callbacks in Fade effect
- New mousewheel parameters:
mousewheelReleaseOnEdges
- 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 slides
- Fixed issue with lazy loading in next slides when
slidesPerView
> 1 - Fixed issue with resistance bounds when swiping is locked
- Fixed issue with wrong slides order in multi-row mode (when
slidesPerColumn
> 1) - Fixed issue with not working keyboard control in RTL mode
- Fixed issue with nested fade-effect swipers
- Minor fixes
- New
width
andheight
parameters to force Swiper size, useful when it is hidden on intialization - Better support for "Scroll Container". So now Swiper can be used as a scroll container with one single "scrollable"/"swipeable" slide
- Added lazy loading for background images with
data-background
attribute on required elements - New "Sticky Free Mode" (with
freeModeSticky
parameter) which will snap to slides positions in free mode - Fixed issues with lazy loading
- Fixed slide removing when loop mode is enabled
- Fixed issues with Autoplay and Fade effect
- Minor fixes
- Fixed sometimes wrong slides position when using "Fade" effect
.destroy(deleteInstance, cleanupStyles)
method now has secondcleanupStyles
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 direction- Minor fixes
- New Keyboard accessibility module to provide foucsable navigation buttons and basic ARIA for screen readers with new parameters:
a11y: 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
- New Emitter module. It allows to work with callbacks like with events, even adding them after initialization with new methods:
.on(event, handler)
- add event/callback.off(event, handler)
- remove this event/callback.once(event, handler)
- add event/callback that will be executed only once
- Plugins API is back. It allows to write custom Swiper plugins
- Better support for browser that don't support flexbox layout
- New parameter
setWrapperSize
(be default it isfalse
) 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 slides - New
virtualTranslate
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 transition - Added support for multiple Pagination containers
- Fixed
onLazyImage...
callbacks - Fixed issue with not accessible links inside of Slides on Android < 4.4
- Fixed pagination bullets behavior in loop mode with specified
slidesPerGroup
- Fixed issues with clicks on IE 10+ touch devices
- Fixed issues with Coverflow support on IE 10+
- Hashnav now will update document hash after transition to prevent browsers UI lags, not in the beginning like before
- Super basic support for IE 9 with swiper.jquery version. No animation and transitions, but basic stuff like switching slides/pagination/scrollbars works
- New Images Lazy Load component
- With new parameters
lazyLoading
,lazyLoadingInPrevNext
,lazyLoadingOnTransitionStart
(all disabled by default) - With new callbacks
onLazyImageLoad
andonLazyImageReady
- With new parameters
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 loaded
- Fixed issues with touchmove on fouces form elements
- New
onObserverUpdate
callback function to be called after updates by ovserver - Fixed issue with not working inputs with keyboard control for jQuery version
- New
paginationBulletRender
parameter that accepts function which allow custom pagination elements layout - Hash Navigation will run callback dpending on
runCallbacksOnInit
parameter watchVisibility
parameter renamed towatchSlidesVisibility
- Fixed issue with not firing onSlideChangeEnd callback after calling .slideTo with runCallbacks=false
- Fixed values of isBeginning/isEnd when there is only one slide
- New
crossFade
option for fade effect - Improved support for devices with both touch and mouse inputs, not yet on IE
- Fixed not correctly working mousewheel and keyobard control in swiper.jquery version
- New parallax module for transitions with parallax effects on internal elements
- Improved .update and .onResize methods
- Minor fixes
- Fixed issue with keyboard events not cleaned up with Swiper.destroy
- Encoded inline SVG images for IE support
- New callbacks
- onInit (swiper)
- onTouchMoveOpposite (swiper, e)
- Fixed free mode momentum in RTL layout
.update
method improved to fully cover whatonResize
do for full and correct update- Exposed
swiper.touches
object with the following properties:startX
,startY
,currentX
,currentY
,diff
- New methods to remove slides
.removeSlide(index)
or.removeSlide([indexes])
- to remove selected slides.removeAllSlides()
- to remove all slides
- Fixed issue with navigation buttons in Firefox in loop mode
- Fixed issue with image dragging in IE 10+
- Initial release of all new Swiper 3
- Removed features
- Dropped support for old browsers. Now it is compatible with:
- iOS 7+
- Android 4+ (multirow mode only for Android 4.4+)
- Latest Chrome, Safari, Firefox and Opera desktop browsers
- WP 8+, IE 10+ (3D effects may not work correctly on IE because of wrong nested 3D transform support)
- Scroll Container. Removed in favor of pure CSS
overflow: auto
with-webkit-overflow-scrolling: touch
- Dropped support for old browsers. Now it is compatible with:
- New features
- Swiper now uses modern flexbox layout, which by itself give more features and advantages
- Such Swiper 2.x plugins as Hash Navigation, Smooth Progress, 3D Flow and Scrollbar are now incoroporated into Swiper 3.x core
- Full RTL support
- Built-in navigation buttons/arrows
- Controller. Now one Swiper could be controlled (or control itself) by another Swiper
- Multi row slides layout with
slidesPerColumn
option - Better support for nested Swipers, now it is possible to use same-direction nested Swipers, like horizontal in horizontal
- Space between slides
- New transition effects: 3D Coverflow, 3D Cube and Fade transitions
- Slides are
border-box
now, so it is possible to use borders and paddings directly on slides - Auto layout mode (
slidesPerView: 'auto'
) now gives more freedom, you can even specify slides sizes in % and use margins on them - Mutation Observers. If enabled, Swiper will watch for changes in Dom and update its layout automatically
- Better clicks prevention during swiping
- Many of API methods, parameters and callbacks are changed
- Added a bit lightweight jQuery/Zepto version of Swiper that can be used if you use jQuery/Zepto in your project