6.4.15 (2021-02-18)
- angular, vue, svelte: add 'observer', etc. to params-list (8f1cd29)
- core: correctly store class names (02265ec), closes #4247
6.4.14 (2021-02-17)
- svelte: add "observer" params support to props (703ea53)
- vue: add "observer" params support to props (1d37ff7)
- fixed error bundling CJS module (0cda5e4), closes #4242
- react: add 'observer', etc. to params-list (205c14e)
- angular: thumbs & controller support (76acd28)
6.4.12 (2021-02-16)
- angular: autoplay SSR (4f1e9c4)
- angular: don't enable observer when virtual enabled (8810b18)
- angular: virtual SSR (63fed99)
- angular: call swiperRef outside of angular (4e544ef)
6.4.11 (2021-02-06)
- angular: BrowserAnimationsModule slides deletion (fef6ebd)
- react: navigation, pagination and scrollbar is not disabled when #4181 (460787d)
- react: correctly check for virtual params (92c0137)
- react: support SwiperSlider components wrapped in higher order components and fix nested fragments bug #4144
- vue: update virtual slides on nextTick (5208b1a), closes #4172
- svelte/vue navigation, pagination and scrollbar is not disabled when
false
#4181 (ffedb6b)
- angular: use observer to update swiper on slides changes (962a0c0)
- angular: use swipers observer (30dd7c9)
6.4.10 (2021-01-29)
- core: don't throw error when trying to init on non existent element (31aa87a)
- core: fixed issue with "scroll container" (c3d0b97), closes #4161
- react: fixed issut with Virtual Slides not working correctly (c24f7ef), closes #4162
- vue: fixed updating virtual slides on virtual data change (5979102)
6.4.9 - Released on January 28th, 2021
- angular: Cannot set property 'classNames' of undefined (13bcf39)
- angular: content slider ngIf (4ca13e4)
- angular: tsconfig path (f2dcf16)
- angular: zoom container custom class (5d4f11c)
- core: disable extra grid item for free mode (9159d89), closes #4010
- docs: change url api -> swiper-api (3dc9203)
- docs: heading levels (e8157e6)
- scrollbar: fixed issue when initialized with empty
scrollbar.el
will throw an error on destroy - svelte: slots container start & end (b23b4e1)
- zoom: consider window scroll for offsets (60cd60a), closes #4039
6.4.8 - Released on January 22th, 2021
- Core
- Improved default behavior on Windows touch screen devices
- Types
- Some docs comments fixes
6.4.7 - Released on January 21th, 2021
- Types
- Added full docs comments for all Swiper parameters
- Angular
- Proper support for zoom functionality with required extra "zoom" element. Can be enabled with
zoom
prop on slides, e.g.<ng-template swiperSlide [zoom]="true">
- Fixed issue with SSR
- Fixed issue with not working custom
pagination.el
- Proper support for zoom functionality with required extra "zoom" element. Can be enabled with
6.4.6 - Released on January 20th, 2021
- Core
edgeSwipeDetection
parameter now can receive string'prevent'
to prevent system swipe-back navigation- Fixed issue when with decimal
slidesPerView
last slide never received "active" class/state - Cube
- Fixed shadow rendering issues in Chrome
- React/Svelte/Vue/Angular
- Fixed rendering issue when virtual slides used with breakpoints
- Minor fixes
6.4.5 - Released on December 18th, 2020
- Fixed issue with
postinstall
script
6.4.4 - Released on December 18th, 2020
- Fixed issue with
postinstall
script - Now
.css
files are also available for all components - Svelte
- Fixed issue with wrong location of
.svelte
files in package
- Fixed issue with wrong location of
- Angular
- Types fixes
- Added
[config]
support to pass all Swiper params as single object (https://github.com/nolimits4web/swiper/commit/f7d21c5f49860fdca62a31ccb62b01a790fd0df3) - Added
(index)
active slide binding (https://github.com/nolimits4web/swiper/commit/86670bd7c1b95268919147662383804e664011a7)
- Minor fixes
6.4.1 - Released on December 9th, 2020
- Fixed types errors introduced in
6.4.0
6.4.0 - Released on December 8th, 2020
- All new Swiper Angular components (kudos to @vltansky) 🎉
- React
- Now Swiper won't cleanup styles on destroy
- Svelte
- Now svelte package contains source
.svelte
components - Now Swiper won't cleanup styles on destroy
- Now svelte package contains source
- Vue
- Now Swiper won't cleanup styles on destroy
- Lazy
- Now it has options to check is Swiper also is in view before loading the images (thanks to @ygj6)
- Build
- Fixed sourcemap missing original sources
- Lots of minor fixes
6.3.5 - Released on October 30th, 2020
- Build
- Fixed builds on Windows
- Core
- Fixed no swiping class in shadow component (#3868)
- Typecheck for
slideTo
'sindex
parameter
6.3.4 - Released on October 20th, 2020
- Vue
- Fixed issue with
Maximum recursive updates
- Fixed issue with
6.3.3 - Released on October 9th, 2020
- Core
- Fixed issue with wrong slides calculation when slides have inner scrollbars
- Autoplay
- Now it will continue autoplay if it reaches the end and new slides will be added later
- React
- Fixed issue when slide render function data was set only after interaction
- Minor fixes
6.3.2 - Released on September 28th, 2020
- Svelte
- Fixed issue with throwing error when using breakpoints
6.3.1 - Released on September 25th, 2020
-
Core
- A11y
- Init module after all other modules initialized
- A11y
6.3.0 - Released on September 25th, 2020
-
Core
- A11y
- Added new parameters
containerMessage
,containerRoleDescriptionMessage
anditemRoleDescriptionMessage
(#3834 thanks to @jenemde)
- Added new parameters
- A11y
-
React
- Now
SwiperSlide
component requires uniquevirtualIndex
to be set so Swiper can know which slide is rendered exactly
- Now
-
Vue
- Fixed issue when
SwiperSlide
was not rendered if used withv-for
- Now
SwiperSlide
component requires uniquevirtualIndex
to be set so Swiper can know which slide is rendered exactly
- Fixed issue when
-
All 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>
6.2.0 - Released on September 4rd, 2020
-
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>
6.1.3 - Released on September 3rd, 2020
- Core
- Pagination
- Now it won't set a11y attributes on customly rendered bullets
- Pagination
- React
- Fixed issue with loop mode and breakpoints not being recalculate slides
6.1.2 - Released on August 17th, 2020
- React
- Fixed issue generating
useLayoutEffect
warning in Next.js - Fixed issue with Virtual List in RTL mode
- Fixed issue generating
6.1.1 - Released on July 31th, 2020
- Fixed ESM/CJS import paths
6.1.0 - Released on July 31th, 2020
- Core
- Mousewheel
- New mousewheel parameters
thresholdDelta
andthresholdTime
(#3720)
- New mousewheel parameters
- Fixed issue with Navigation and Pagination
.less
files (#3724) - Fixed issue with setting proper
sideEffects
causing some bundlers to not include imported styles (#3708)
- Mousewheel
- React
- Now
SwiperSlide
accepts render function withisActive
,isVisible
,isPrev
,isNext
,isDuplicate
props:<Swiper> <SwiperSlide> {({ isActive }) => <div>Current slide is {isActive ? 'active' : 'not active'}</div>} </SwiperSlide> <SwiperSlide>...</SwiperSlide> ... </Swiper>
- Now
- Minor fixes
6.0.4 - Released on July 15th, 2020
- Fixed TS definitions for Swiper React component (#3692)
6.0.3 - Released on July 14th, 2020
- Dom7 updated to latest with correct
__proto__
setters/getters
6.0.2 - Released on July 9th, 2020
- React
- Now Swiper will be auto updated if
pagination.el
,scrollbar.el
,navigation.nextEl
andnavigation.prevEl
are passed from later-available refs
- Now Swiper will be auto updated if
6.0.1 - Released on July 7th, 2020
-
Core
- SCSS:Fixed issue with missing
$colors
var in Navigation and Pagination
- SCSS:Fixed issue with missing
-
React
- Fixed Swiper instance argument typings in event handler props
- Added event handler props definitions for modules events
6.0.0 - Released on July 3rd, 2020
-
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 format
-
Following imports are now available
import Swiper from 'swiper'
- imports core versionimport Swiper from 'swiper/bundle'
- imports bundle versionimport Swiper from 'swiper/core'
- imports core version
-
Components 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 used
-
New
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
andssr-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> ); };
5.4.5 - Released on June 16th, 2020
- Core
- Fixed issue when checkOverflow method could throw error if Navigation module wasn't installed (#3621)
- Keyboard
- New parameter
pageUpDown
to enable/disable pageUp and pageDown keys (enabled by default)
- New parameter
5.4.3 - Released on June 13th, 2020
- Core
- Removed
UIWebView
text from code - Fixed resize handler calling
slideTo
to last slide when it shouldn't
- Removed
5.4.2 - Released on June 3rd, 2020
- Mousewheel
- Fixed issue when enabling
forceToAxis
also inverted scrolling
- Fixed issue when enabling
- Coverflow Effect
- Added support for
scale
parameter (#3598)
- Added support for
- Pagination
- Fixed detection of
uniqueNavElements
(#3590)
- Fixed detection of
5.4.1 - Released on May 20th, 2020
- Fixed dependencies versions
5.4.0 - Released on May 15th, 2020
- Hash Navigation
- Added
hashChange
andhashSet
events (#3557)
- Added
- Lazy
- Added support for
<picture>
lazy loading (#3560)
- Added support for
- Mousewheel
- Potentially improved vertical scrolling issues on Windows/Linux OS
- Updated
ssr-window
anddom7
dependencies to latest versions - Minor fixes
5.3.8 - Released on April 24th, 2020
- Core
- Fix iOS bug with double bounce on free mode momentum bounce
- A11y
- Fixed focus ring on navigation buttons (#3544)
- Fixed RegExp issue in
paginationBulletMessage
(#3540, #3541)
- Thumbs
- Added
thumbs.autoScrollOffset
parameter that allows to set on what thumbs active slide from edge. It should automatically move scroll thumbs
- Added
- Minor fixes
5.3.7 - Released on April 10th, 2020
- Core
- Fixed
cssMode
behavior in RTL layout
- Fixed
- Zoom
- Fixed issue with not working double-tap to toggle with virtual slides
- Minor fixes
5.3.6 - Released on February 29th, 2020
- Core
- Fixed wrong auto height calculation with
centeredSlides
enabled
- Fixed wrong auto height calculation with
- Lazy
- Now it will update auto height (if enabled) on lazy image loaded (#3466)
- Zoom
- Fixed issue when previously active slide could be zoomed with
zoom.in()
API (#3451) - Fixed issue when zoom didn't work on
<picture>
element (#3456) - Added support for custom zoom-target element by adding
swiper-zoom-target
class to such elements
- Fixed issue when previously active slide could be zoomed with
- Coverflow Effect
stretch
parameter now can be set in%
(#3468)
- Minor fixes
5.3.1 - Released on February 8th, 2020
- Core
- Fixed issue when slider could stuck after last slide (#3414)
- Added
label
to list of form events to keep clicks on it (#3407)
5.3.0 - Released on January 11th, 2020
- Core
- New
slidesPerGroupSkip
behavior (#3361) - New ratio-based breakpoints (#3389)
- Added SCSS interpolation (#3373, #3374)
- New
- Mousehweel
- Fixed issue when it can fail on load (#3383)
- Minor fixes
5.2.1 - Released on November 16th, 2019
- Core
- New loop events
beforeLoopFix
andloopFix
- New parameter
updateOnWindowResize
(by defaulttrue
) that will update/recalc swiper on window resize/orientationchange - Added SCSS interpolation for
--swiper-theme-color
variable when not building from source (#3334) - Quote SCSS color names (#3316)
- Fixed issue when
.once
could be called more than once (#3322)
- New loop events
- Mousewheel
- Fixed scroll wheel unwanted frozen effect (#3328)
- Thumbs
- New
multipleActiveThumbs
(by defaulttrue
) option to control whether multiple thumbnail slides may get activated or not.
- New
- Minor fixes
5.2.0 - Released on October 26th, 2019
- Core
- New
centeredSlidesBounds
parameter that when enabled will keep first and last slides at bounds - Fixed issue when
freeMode
could break position on resize (#2708, #3303) - Fixed transition duration issue with
freeModeSticky
(#3302) - Fixed issue with wrong row/column if not full groups (#3294)
- Fixed issue when
watchOverflow
andslidesOffsetBefore
/slidesOffsetAfter
couldn't work together (#3291)
- New
- Mousewheel
- Faster & smoother mousewheel inertial scrolling (#3304)
- Package
- Added source maps to package builds (#3306)
- Added minified version of browser.esm.bundle
- Minor fixes
5.1.0 - Released on October 16th, 2019
- Core
- Fixed issues with touch on iOS 13
- New
translateTo
method #3268
- Pagination
- Improved dynamic bullets behavior when
loop: true
#3255
- Improved dynamic bullets behavior when
- Zoom
- Fixed issue with pinch to zoom on Android
- Minor fixes
5.0.4 - Released on September 30th, 2019
- Core
- Now on short swipes over navigation buttons, it will treat it like nav button click (#3237 by @robpop)
- Fixed issue when passing float
slidesPerView
could break loop mode (#3225 by @robpop)
- Scrollbar
- Fixed issue with wrong "pointer" position calculation on scroll bar tap
- Autoplay
- Fixed issue when it was
paused
after returning from hidden tab
- Fixed issue when it was
- Minor fixes
5.0.3 - Released on September 19th, 2019
- Core
touchEventsTarget
defaults back tocontainer
- Added handling of
touchcancel
event #3219 - Fixed issue with wrong order calculation in
slidesPerColumnFill: 'row'
mode - Fixed issue with slides missplacing when prepending slides in virtual mode
- Fixed issue when zoomed image still swiped to another slide on mobiles
5.0.1 - Released on September 17th, 2019
- Core
- Fixed typo in code
5.0.0 - Released on September 17th, 2019
- Core
- All new CSS Scroll Snap mode (can be enabled with
cssMode: true
). It doesn't support all of Swiper's features, but potentially should bring a much better performance in simple configurations - Fully removed Internet Explorer support
breakpointsInverse
parameter has been removed and nowbreakpoints
behave like withbreakpointsInverse: true
before.touchMoveStopPropagation
parameter now defaults tofalse
click
event won't be fired with 300ms delay anymore. Now it will be fired at the same time astap
event- When
slidesPerColumnFill: 'column'
it now usesflex-direction: column
layout which requires specified height on swiper-container touchEventsTarget
now defaults towrapper
(rather thancontainer
like before)slidesPerColumn
now can be used with breakpoints- Now Swiper styles use CSS Custom Properties (CSS Custom Variables) to specify swiper's color theme (color of navigation buttons/pagination). It is now
--swiper-theme-color: #007aff;
- Improved
es
module "tree-shake-ability" - New
swiper.esm.browser.bundle.js
package that can be used directly in browser (import Swiper from 'swiper.esm.browser.bundle.js'
)
- All new CSS Scroll Snap mode (can be enabled with
- Autoplay
- Now it will be paused when document becomes hidden (in not active tab) and continued again when document becomes visible
- Lazy
- Swiper preloader image replaced with a little bit simpler loader. Now its color can be changed with
--swiper-preloader-color
CSS custom property (which is defaults to--swiper-theme-color
)
- Swiper preloader image replaced with a little bit simpler loader. Now its color can be changed with
- Pagination
- Active pagination bullets and pagination theme colors now use CSS Custom Properties. It can be defined with
--swiper-pagination-color
property (which is defaults to--swiper-theme-color
)
- Active pagination bullets and pagination theme colors now use CSS Custom Properties. It can be defined with
- Navigation
- Navigation icons reworked with built-in (base64) icon font. It allows to apply any color and size without replacing image
- Navigation buttons colors now use CSS Custom Properties. It can be defined with
--swiper-navigation-color
property (which is defaults to--swiper-theme-color
) - With
--swiper-navigation-size
(defaults to44px
) it is now possible to change size of the navigation buttons (and icons)
- Minor fixes and improvements
4.5.1 - Released on September 13th, 2019
- Core
- Fixed issue when callbacks fires on init even if it disabled (#2807)
- Fixed issue when "swiper-slide-visible" class name in some situations shows up when it shouldn't
slidesPerColumnFill: 'row'
now considers groups (#3077)
- Thumbs
- Fixes bug 'Cannot read property
indexOf
of undefined' that sometimes occurs on use of thumbnails
- Fixes bug 'Cannot read property
- Keyboard
- Added
PageUp
/PageDown
keybindings.
- Added
- Autoplay
- Fixed issue when window resize stopped autoplay
- Parallax
- Fixed issue when parallax opacity didn't work (#3147)
- Minor fixes and improvements
4.5.0 - Released on February 22nd, 2019
- Core
- New
swiper.changeDirection()
method to change direction from horizontal to vertical (and back) dynamically direction
parameter can be used in breakpoints
- New
- Virtual Slides
swiper.virtual.appendSlide
now accepts array of slides to addswiper.virtual.prependSlide
now accepts array of slides to prepend- New
swiper.virtual.removeSlide(indexes)
to remove virtual selected slides - New
swiper.virtual.removeAllSlides()
to remove all virtual slides
- Navigation
- Now it emits
navigationHide
andnavigationShow
events when on nav hide/show
- Now it emits
- Pagination
- Now it emits
paginationHide
andpaginationShow
events when on pagination hide/show
- Now it emits
- Dom7 updated to latest 2.1.3
- Fixed issue when
.once
bound event could still be there after unbinding it with.off
- Fixed issue when
- Source
- Source styles are now available in SCSS in addition to LESS
- Minor fixes and improvements
4.4.6 - Released on December 19th, 2018
- Core
- Fixed issue with wrong slide size calculation in some cases
4.4.5 - Released on December 14th, 2018
- Core
- New
observeSlideChildren
parameter to enable auto update on slide children update - Fixed issue when slide padding was not considered when calculating sizes
- Fixed issue with wrong touch support detection on Windows Chrome
- Fixed some issues with wrong slides grid calculation in multi row mode
- New
- Zoom
- Now it emits
zoomChange
event withscale
,imageEl
andslideEl
arguments
- Now it emits
- Minor fixes
4.4.2 - Released on November 1st, 2018
- New
touchStartForcePreventDefault
parameter to force touch start event prevent default - Breakpoints fix when breakpoint keys are strings
- Fixed issue when draggable scrollbar may not work on desktop Safari
- Fixed issue with wrong sort of Virtual Slides
- Minor fixes
4.4.1 - Released on September 14th, 2018
- Fixed issue with preventing touchstart event
4.4.0 - Released on September 14th, 2018
- Core
- New
centerInsufficientSlides
parameter to center slides if the amount of slides less thanslidesPerView
- New
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 breakpoint
- New
- Virtual Slides
- New
addSlidesBefore
andaddSlidesAfter
parameters to increase amount of pre-rendered slides
- New
- Thumbs
- All new "Thumbs" module/component designed to control slider thumbnails, in more logical and correct way than with Controller module.
- Lots of minor fixes
4.3.5 - Released on July 31th, 2018
- Core
iOSEdgeSwipeThreshold
parameter renamed to justedgeSwipeThreshold
. OldiOSEdgeSwipeThreshold
name is still supported- Improved observer performance if there are many mutations at a time. Thanks to @rayvincent-bsd
- Controller
- Fixed issue with wrong auto height resizing
- Scrollbar
- Fixed issue when it was using active event listeners instead of passive. Thanks to @nyon
- Minor fixes
4.3.3 - Released on June 5th, 2018
- Core
- Fixed issue when slidePrev goes to wrong slide #2650
- Fixed issue when roundLength was not considered for grids calculation #2656
- Fixed typo in API #2659
4.3.2 - Released on June 1st, 2018
- Core
- Added
addSlide(index, slide)
method to add slide at required position. Thanks to @kochizufan - Fixed issue with loop #2647. Thanks to @kochizufan
- Added
- Pagination
- New
formatFractionCurrent(number)
parameter to format current number in Fraction pagination - New
formatFractionTotal(number)
parameter to format total number in Fraction pagination
- New
- Minor fixes
4.3.0 - Released on May 27th, 2018
- Core
- Fixed issue when
swipeBack
sometimes slides to wrong slide - Fixed issue when window resizing can break Coverflow effect layout
- Fixed issue with wrong detection of
iOSEdgeSwipeDetection
. Thanks to @langjun
- Fixed issue when
- Dom7 update to latest v2.0.6:
- Fixed issue with remove event listeners when they was not added
- Minor fixes
4.2.6 - Released on May 1st, 2018
console.log
cleanup
4.2.5 - Released on April 29th, 2018
- Core
- Prevent apply grab cursor when swiper is locked
- Fixed breakpoint with loop getting wrong realIndex when on init
- Fixed "transformed" slides sizes calculation that could cause issues in with Coverflow effect
- Autoplay
- Fixed issue that can cause memory leak
- Dom7 update to latest
- Improved internal events proxies logic for better memory management
- Minor fixes
4.2.2 - Released on April 1st, 2018
- Core
- Respect and update breakpoints when calling Swiper's
.update()
method
- Respect and update breakpoints when calling Swiper's
- Pagination
- New
progressbarOpposite
parameter to make pagination progressbar opposite todirection
parameter, means vertical progressbar for horizontal swiper direction and horizontal progressbar for vertical swiper direction
- New
- Mousewheel
- Fixed issue in
loop
+freeMode
for loop not being set correctly
- Fixed issue in
- Minor fixes
4.2.0 - Released on March 16th, 2018
- Core
swiper.updateAutoHeight(speed)
now supportsspeed
parameter to resize swiper wrapper with duration- Fixed issues in free mode with
freeModeSticky
not being able to snap to closest snap point - New
swiper.slideToClosest()
method to slide to closest snap point when it is somewhere in between
- A11y (Accessibility)
- It is now enabled by default (if installed)
- Controller
- Fixed RTL issue when vertical swiper controls horizontal one
- Lazy
- Fixed issue when lazy loading not always triggered on window resize
- Minor fixes
4.1.6 - Released on February 11th, 2018
- Fixed onTouchMoveOpposite event on touch devices
4.1.5 - Released on February 10th, 2018
- Improved touch events support on desktop Windows devices with touch screen
- Improved "loop fix" when slider is in the free mode
- New
noSwipingSelector
parameter that can be used instead ofnoSwipingClass
- New
preventIntercationOnTransition
parameter to prevent interaction during slice change transition - New
.slideToLoop
method to be used in loop mode - Fixed issue with
slideChange
events being fired when slide wasn't actually changed - Scrollbar
- Now doesn't require to enable
simulateTouch
for desktops when it isdraggable
- Now doesn't require to enable
- Keyboard
- Fixed detection statement whether a swiper is in the viewport
- Pagination
- Added new multiple main bullets support for dynamic bullets pagination
- Zoom
- Now supports Virtual Slides
- Minor fixes
4.1.0 - Released on January 13th, 2018
- Improved IE 10 support. But it is recommended to use proto polyfill
- Improved touch support for Edge
- New
watchOverflow
(disabled by default). When enabled Swiper will be disabled and hide navigation buttons on case there are not enough slides for sliding - Autoplay
- New
reverseDirection
to enable autoplay in reverse direction - New
waitForTransition
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 transition
- New
- Keyboard
- New
onlyInViewport
parameter (enabled by default). When enabled it will control sliders that are currently in viewport
- New
4.0.7 - Released on November 28th, 2017
- Fixed issue with not working correctly
touchReleaseOnEdges
on iOS - Fixed issue with not working allowSlideNext/Prev change on Breakpoints
- Fixed wrong scrollbar dragging when using custom
dragSize
- Minor fixes
4.0.6 - Released on November 13th, 2017
- Fixed Coverflow effect issue using with breakpoints
iOSEdgeSwipeDetection
will also be in consideration with right-edge swipe- Fixed
freeModeSticky
behavior in RTL mode - Swiper now emits
breakpoint
event on breakpoint change - Minor fixes
4.0.5 - Released on November 7th, 2017
- Fixed issue with not working
noSwiping
parameter - Parallax now considers
slidesPerGroup
parameter - Zoom: improved gestures handling
- Pagination: fixed issues with wrong positioned dynamic-bullets when there are not enough slides
- Fixed issues with some effects being broken with enabled
breakpoints
- Minor fixes
4.0.3 - Released on October 27th, 2017
- Fixed Parallax opacity and scale transitions
- Better compatability with SSR by using dummy
document
object - Fixed styles for dynamic pagination buttons in RTL mode
- Fixed issue with last pagination button not being active with
slidesPerView: 'auto'
- Renamed build tasks:
build-dev
->build:dev
,build-prod
->build:prod
4.0.2 - Released on October 18th, 2017
- Lazy loading support for Virtual slides
- Added
beforeResize
event - Minor fixes
4.0.1 - Released on October 11th, 2017
- Fixed issue with pagination being broken with loop mode
- Reworked
realIndex
calculation ordering - ES-module files renamed (possible breaking change):
swiper.module.js
->swiper.esm.bundle.js
(exported by default)swiper.modular.js
->swiper.esm.js
- Minor fixes
4.0.0 - Released on October 4th, 2017 🎉
- New API (check Documentation)
- Virtual Slides - new module that keeps in DOM just required amount of slides
- Source code has been fully rewritten in ES-next syntax
- Dist package contains additional ES-next modules:
swiper.module.js
- swiper bundle forimport Swiper from 'swiper'
swiper.modular.js
- modular version for using Swiper with required components only
- New
scripts/build-config.js
for creating custom Swiper build with required components and custom color theme - jQuery version of Swiper has been removed
- Improved compatibility with server-side rendering
- Hundreds of improvements and fixes
- Fixed issue with draggable Scrollbar in RTL layout
- Minor fixes
- Dom7 update to latest version
- Small core refactoring to get better results within tree-shaking bundles
- Disable a11y by default
- Fixed issue with events sharing between multiple swipers
- Fixed issue with resize handling after destroy
- Few minor fixes
- Initial 4.0.0 release
- Fixed an issue with lazy loading callbacks when swiper is destroyed
- New
onAfterResize
andonBeforeResize
callbacks - New
onKeyPress
callback when keyboard control is used - Fixed Chrome+Windows issue with not clickable links that have "title" attribute
- Minor fixes
- 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 adapts to the height of currently active slide. Can be enabled with
autoHeight: true
parameter - Fixed issue with breakpoints 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
- Improved 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}}'
- Controller
- 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 used 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 previous 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 focusable 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 focused form elements
- New
onObserverUpdate
callback function to be called after updates by observer - 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 incorporated 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