effect
参数类型 (#7945) (42eec07)zoom.in()
函数的 transform origin (#7904) (f7febe1)slidesEl
、slidesGrid
和 slidesSizesGrid
的类型定义 (#7768) (fb59a41)scrollOnFocus
(#7632) (f4f7da0)slidesUpdated
事件 (8a0c7c4)loopAddBlankSlides
参数 (b5db223)loopedSlides
参数,添加 loopAdditionalSlides
参数 (d647985)eventPrefix
参数默认值为 swiper
(88d463a)hidden
(88941a8)realIndexChange
(48c4e0a),关闭 #6976slideToClickedSlide
的问题 (af0519c),关闭 #6958hashchange
事件 (106a3d7),关闭 #6943{enabled: true}
的对象参数 (abf8405)contextmenu
事件 (721ccaf),关闭 #6692part
的问题 (db5b5d6),关闭 #6899isElement
(#6870) (2f61fda)releaseOnEdges
(8a83360),关闭 #6770 #6799<style>
标签 (18613df).esm.js
重命名为 .mjs
(7a17821)<div class="swiper">
<div class="swiper">
centeredSlidesBounds
在 slide 数量不足时的问题 (93b4279),关闭 #6689swiperSlideSize
的错误 (36ef2e6),关闭 #6718allowSlideNext
的问题 (d61da52),关闭 #6737smoothScroll
检查的问题 (e0f4ae4)injectStylesUrls
无法正常工作的问题 (6a50d45),关闭 #6662effect
参数添加 string
类型 (7340629),关闭 #6676noMousewheelClass
参数 (0fcd210)swiper-no-mousewheel
忽略类 (#6671) (c9130c3)SwiperClass
类型 (6768efe),关闭 #5500%
时的情况 (446af7e),关闭 #6647connected
时渲染 swiper (5a5ebb4)%
时的情况 (446af7e),关闭 #6647connected
时渲染 swiper (5a5ebb4)injectStyles
以作为 props 接受 (7c1c5d3),关闭 #6578null
类型 (3177936),关闭 #6505slideActiveClass
时的循环 (#6495) (756ecdb)+
字符 (d0beb9f),关闭 #6486on
事件处理程序的问题 (898f76c),关闭 #6399window.SwiperElementRegisterParams
方法,用于注册可接受的元素 props (fb63358)spaceBetween
也可以是字符串 (446fb06),关闭 #6286autoplayTimeLeft
事件的声明 (8467397),关闭 #6333oneWayMovement
参数preloadImages
, updateOnImagesReady
参数controller.control
参数也接受 HTMLElement 或带有 swiper 选择器的 CSS 字符串来控制rotate
thumbs.swiper
参数也接受 HTMLElement 或带有缩略图 swiper 选择器的 CSS 字符串swiper.zoom.in(ratio)
方法现在接受自定义缩放比例wrapperClass
(7aaa0d1),关闭 #6254 #5942loopPreventsSliding
参数 (6533890)oneWayMovement
参数 (ce2ea7f)in
方法现在接受自定义缩放比例 (d88df61),关闭 #5527renderSlide
支持幻灯片外部 HTML 和 HTML 元素 (fdcd644)autoplay-delay
形式的属性支持复杂参数 (8161c57)slide*DuplicateClass
参数 (8007e1a)postinstall
脚本 (12255cf)threshold
参数默认设置为 5
(dfce8a3)lazy
属性以渲染懒加载预加载器 (f5d137f)lazy
属性以渲染懒加载预加载器 (e36b580)popstate
问题 (483534f).jsx
中 (d7f7f65)beforeSlideChangeStart
事件路由问题 (0e8a8b8),关闭 #5913perSlideRotate
和 perSlideOffset
参数 (db08a70),关闭 #5939loopedSlidesLimit
参数,用于重新复制幻灯片 (1afa4b8)changeLanguageDirection
方法,用于在初始化后将其更改为 RTL/LTR (f5bb7af),关闭 #3279navigationPrev
和 navigationNext
事件 (d0c6365),关闭 #5832autoplay.delay = 0
" (d942e83)0
autoplay delay" (56e050b)enabled
属性问题 (af9ed85)autoplay.delay = 0
时立即进行自动播放 (81a4cc8)loadPrevNext
修复 slidesPerView
为小数时的问题 (94d4c9e),关闭 #5712snapIndex
和 snapGrid
属性 (ee3d2dc),关闭 #5733opacity: 0
样式 (85f72f4)--swiper-cube-translate-z
CSS 属性 (758ad28)id
参数 (213c8fe),关闭 #5586[ngClass]
(#5562) (5d4ffdc)rotate
参数 (5f4ca8a),关闭 #5575useSwiper
上下文值 (#5421) (60cbe75)aria-disabled
(8183466),关闭 #5383[@output](https://github.com/output)
事件触发 (#5225) (a34eb7a)allowTouchMove: false
时,不要阻止可聚焦元素的点击 (f0eac04),关闭 #5358<select>
元素 (faeb14a),关闭 #5268control
属性数组更改时更新 controller.control
(7c53de8),关闭 #5368swiperSlide
槽数据与上下文 (89f14ab)Dom7Array
(#5405) (d248a14)Tab
) (1288271),关闭 #3149strict
(#5231) (23ee4b3)autoplayPause
和 autoplayResume
事件 (aea56ed)useSwiper
和 useSwiperSlide
上下文钩子 (#5364) (18bb89b)swiper
和 swiperSlide
上下文 (#5391) (b5c2d3b)rewind
功能 (e52de28)useSwiper
和 useSwiperSlide
上下文钩子 (987a32e)maxBackfaceHiddenSlides
参数,以防止 Safari 中的闪烁 (d679a98)maxBackfaceHiddenSlides
参数,以防止 Safari 中的闪烁 (8c05e6d)virtualData
的类型 (682f56f)swiper
和 swiperSlide
上下文 (#5377) (f3145b1)rewind
描述 (83574e1)progressMultipler
-> progressMultiplier
(#5158) (815e837)swiperRef
在 SwiperSlide vue 组件中不是必需的 (#4992) (1cd6af8)[(index)]
和 setIndex()
(#4951) (7ee3d58)cards
效果 (#4950) (c18aa08)initNavEl()
方法的参数问题 (#4884) (2987700)slidesPerView
切换到 auto 时重置幻灯片大小 (2c8784b),关闭 #4881swiper-zoom-container
中缩放元素 (a4e351f),关闭 #4847watchOverflow
解锁 slidePrev/Next (f1b7397)centeredSlides
下的滚动条大小 (91f2f2f)modules
属性 (596e2a1)modules
参数 (0d599e2)shadowPerProgress
参数 (980c4c7)progressMultiplier
选项 (ed3bd7a)swiper-container
类到 swiper
(ad8002c)swiper-container
类到 swiper
(c763c9c)watchOverflow
现在默认启用 (b97286f)watchOverflow
检测 (627ae4c)limitProgress
和 perspective
选项 (1c7d49e)slidesPerGroupAuto
功能 (2b6f133),关闭 #4168centeredSlides
(c940953)watchSlidesProgress
和 watchSlidesVisibility
合并为单个 watchSlidesProgress
(33dbf62)isEdge
浏览器检测 (9c9970c)slidesPerColumn
功能移至新的 Grid 模块 (0f1df44)touchEventsTarget
现在默认为 wrapper
(71ffcb5),关闭 #4751 #3816mouse
事件监听器,改用指针事件 (b9254ab)resizeObserver
默认不启用 (552a7ea)type: module
(e8d89f2)swiper/types
中缺少 package.json 的问题!
(0cfbc53),关闭 #4812focusableElements
属性类型问题 (7f1b1b9),关闭 #4822slidesPerColumn
断点上重置幻灯片 margin-top (c94a115),关闭 #4044HTMLElement
的服务器端检查 (关闭 #4787) (#4788) (ca4f6b8)module
组件属性安装模块 (#4768) (ddaa069),关闭 #4767class
(1285195),关闭 #4679slidesPerColum
改变时,取消幻灯片的上边距 (1ced4f7),关闭 #4658enabled
属性 (76dd086),关闭 #4633wrapperClass
为多个类 (0d578b0),关闭 #4680focusableElements
可配置 (6ff0866),关闭 #4677window.matchMedia
检测断点窗口宽度 (1a4afe0),关闭 #4682createElements: true
参数 (#4507) (aef2865)disableOnInteraction
和 pauseOnMouseEnter
都启用,交互时将停止自动播放 (e7e5031),关闭 #4598pauseOnMouseEnter
参数,用于在鼠标移入容器时暂停自动播放 (1a10247),关闭 #4482<swiper>
组件上使用 class 和 ngClass (66c5a55)a11y.slideRole
参数用于自定义幻灯片角色 (097109f),关闭 #4435root
参数,用于避免根路径检测问题 (e6d1202),关闭 #3205React.StrictMode
中运行 Virtual、Controller 和 Thumbs 的问题swiper.setProgress
方法,用于设置整个 Swiper 的过渡进度(0 到 1)aria-roledescription
属性名称 (1b73c3b),关闭 #4371getComputedStyle
助手 (9698e58),关闭 #4337<button>
元素,则在其上设置 disabled
属性 (7536fbd),关闭 #4312false
#4181 时,导航、分页和滚动条未禁用 (ffedb6b)scrollbar.el
初始化时,销毁时会抛出错误的问题zoom
属性启用,例如 <ng-template swiperSlide [zoom]="true">
pagination.el
不起作用的问题edgeSwipeDetection
参数现在可以接收字符串 'prevent'
以阻止系统滑动返回导航slidesPerView
为小数时,最后一张幻灯片从未收到“active”类/状态的问题postinstall
脚本问题postinstall
脚本问题.css
文件.svelte
文件位置错误的问题[config]
支持,以单个对象传递所有 Swiper 参数 (https://github.com/nolimits4web/swiper/commit/f7d21c5f49860fdca62a31ccb62b01a790fd0df3)(index)
活动幻灯片绑定 (https://github.com/nolimits4web/swiper/commit/86670bd7c1b95268919147662383804e664011a7)6.4.0
中引入的类型错误.svelte
组件slideTo
的 index
参数类型检查Maximum recursive updates
问题核心
核心
containerMessage
、containerRoleDescriptionMessage
和 itemRoleDescriptionMessage
(#3834 感谢 @jenemde)React
SwiperSlide
组件需要设置唯一的 virtualIndex
,以便 Swiper 确切知道渲染了哪个幻灯片Vue
v-for
一起使用时 SwiperSlide
未渲染的问题SwiperSlide
组件需要设置唯一的 virtualIndex
,以便 Swiper 确切知道渲染了哪个幻灯片所有新的 Swiper Svelte 组件
<Swiper spaceBetween="{50}" slidesPerView="{3}">
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
...
</Swiper>
<script>
import { Swiper, SwiperSlide } from 'swiper/svelte';
</script>
所有新的 Swiper Vue.js (v3) 组件
<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
警告的问题thresholdDelta
和 thresholdTime
(#3720).less
文件的问题 (#3724)sideEffects
导致某些打包器不包含导入样式的问题 (#3708)SwiperSlide
接受带有 isActive
、isVisible
、isPrev
、isNext
、isDuplicate
属性的渲染函数
<Swiper>
<SwiperSlide>
{({ isActive }) => <div>Current slide is {isActive ? 'active' : 'not active'}</div>}
</SwiperSlide>
<SwiperSlide>...</SwiperSlide>
...
</Swiper>
__proto__
setter/getterpagination.el
、scrollbar.el
、navigation.nextEl
和 navigation.prevEl
从稍后可用的引用传递,Swiper 将自动更新核心
$colors
变量的问题React
新的 NPM 包结构
所有脚本都转译为 ES5
新的和重命名的文件 (BREAKING CHANGE)
swiper.less
- 核心 Swiper LESSswiper.scss
- 核心 Swiper SCSSswiper-bundle.css
- Swiper 包 CSSswiper-bundle.js
- UMD 格式的 Swiper 包 JavaScriptswiper-bundle.cjs.js
- CommonJS 格式的 Swiper 包 JavaScriptswiper-bundle.esm.js
- ESM 格式的 Swiper 包 JavaScriptswiper.cjs.js
- CommonJS 格式的 Swiper 核心 JavaScriptswiper.esm.js
- ESM 格式的 Swiper 核心 JavaScript现在可以使用以下导入
import Swiper from 'swiper'
- 导入核心版本import Swiper from 'swiper/bundle'
- 导入捆绑版本import Swiper from 'swiper/core'
- 导入核心版本组件可以从核心版本使用命名导入,或使用直接导入
import { Navigation } from 'swiper';
// or
import Navigation from 'swiper/components/navigation';
// and styles (Less or SCSS only)
import 'swiper/components/navigation/navigation.less';
完全支持服务器端渲染 (SSR),带新参数
userAgent
- 设备用户代理,某些初始检测所需url
- 如果使用哈希导航或历史模块,则需要正确检测和设置初始幻灯片新的 loopPreventsSlide
布尔参数(默认启用),在过渡进行中时阻止 slidePrev/Next 过渡
完全支持 Node.js DOM 库,如 JSDOM 和 Domino
添加了新的 onAny(callback)
监听器,用于监听任何 swiper 事件
所有事件现在都将 swiper
实例作为第一个参数发出 (BREAKING CHANGE)
添加了官方 TypeScript 定义
更新为使用下一代 dom7
和 ssr-window
库
所有新的 Swiper React 组件
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
,用于启用/禁用 pageUp 和 pageDown 键(默认启用)UIWebView
文本slideTo
调用到最后一页的问题forceToAxis
也会反转滚动的问题scale
参数的支持 (#3598)uniqueNavElements
的检测问题 (#3590)hashChange
和 hashSet
事件 (#3557)<picture>
懒加载的支持 (#3560)ssr-window
和 dom7
依赖项更新到最新版本paginationBulletMessage
中的 RegExp 问题 (#3540, #3541)thumbs.autoScrollOffset
参数,允许设置活动幻灯片距离边缘的缩略图数量。它应该自动移动滚动缩略图cssMode
行为的问题centeredSlides
时自动高度计算错误的问题zoom.in()
API 缩放的问题 (#3451)<picture>
元素缩放不起作用的问题 (#3456)swiper-zoom-target
类来支持自定义缩放目标元素stretch
参数现在可以设置为 %
(#3468)label
添加到表单事件列表,以保持其上的点击 (#3407)slidesPerGroupSkip
行为 (#3361)beforeLoopFix
和 loopFix
updateOnWindowResize
(默认 true
),将在窗口大小调整/方向改变时更新/重新计算 swiper--swiper-theme-color
变量添加了 SCSS 插值 (#3334).once
可能被调用多次的问题 (#3322)multipleActiveThumbs
(默认 true
)选项,用于控制是否可以激活多个缩略图幻灯片。centeredSlidesBounds
参数,启用后将使第一张和最后一张幻灯片保持在边界内freeMode
在调整大小后可能破坏位置的问题 (#2708, #3303)freeModeSticky
的过渡持续时间问题 (#3302)watchOverflow
和 slidesOffsetBefore
/slidesOffsetAfter
无法协同工作的问题 (#3291)translateTo
方法 #3268loop: true
时动态子弹的行为 #3255slidesPerView
可能破坏循环模式的问题 (#3225 by @robpop)paused
的问题touchEventsTarget
默认回退为 container
touchcancel
事件的处理 #3219slidesPerColumnFill: 'row'
模式下顺序计算错误的问题cssMode: true
启用)。它不支持 Swiper 的所有功能,但在简单配置中可能会带来更好的性能breakpointsInverse
参数已移除,现在 breakpoints
的行为与以前的 breakpointsInverse: true
相同。touchMoveStopPropagation
参数现在默认为 false
click
事件不再有 300 毫秒的延迟。现在它将与 tap
事件同时触发slidesPerColumnFill: 'column'
时,现在使用 flex-direction: column
布局,这需要 swiper-container 指定高度touchEventsTarget
现在默认为 wrapper
(以前是 container
)slidesPerColumn
现在可以与断点一起使用--swiper-theme-color: #007aff;
es
模块的“tree-shake-ability”swiper.esm.browser.bundle.js
包可以直接在浏览器中使用(import Swiper from 'swiper.esm.browser.bundle.js'
)--swiper-preloader-color
CSS 自定义属性更改(默认为 --swiper-theme-color
)--swiper-pagination-color
属性定义(默认为 --swiper-theme-color
)--swiper-navigation-color
属性定义(默认为 --swiper-theme-color
)--swiper-navigation-size
(默认为 44px
),现在可以更改导航按钮(和图标)的大小slidesPerColumnFill: 'row'
现在考虑组 (#3077)indexOf
属性”错误PageUp
/PageDown
键绑定。swiper.changeDirection()
方法,用于动态改变方向(从水平到垂直,反之亦然)direction
参数可在断点中使用swiper.virtual.appendSlide
现在接受幻灯片数组swiper.virtual.prependSlide
现在接受要前置的幻灯片数组swiper.virtual.removeSlide(indexes)
,用于移除虚拟选定的幻灯片swiper.virtual.removeAllSlides()
,用于移除所有虚拟幻灯片navigationHide
和 navigationShow
事件paginationHide
和 paginationShow
事件.off
解绑后 .once
绑定的事件仍然存在的问题observeSlideChildren
,用于在幻灯片子元素更新时启用自动更新zoomChange
事件,带有 scale
、imageEl
和 slideEl
参数touchStartForcePreventDefault
,用于强制阻止 touch start 事件的默认行为centerInsufficientSlides
,用于在幻灯片数量少于 slidesPerView
时居中幻灯片breakpointsInverse
(布尔值),如果启用,则会反向计算断点,例如,当窗口宽度大于指定断点时,将覆盖参数addSlidesBefore
和 addSlidesAfter
,用于增加预渲染幻灯片的数量iOSEdgeSwipeThreshold
参数重命名为 edgeSwipeThreshold
。旧的 iOSEdgeSwipeThreshold
名称仍然受支持addSlide(index, slide)
方法,用于在所需位置添加幻灯片。感谢 @kochizufanformatFractionCurrent(number)
参数,用于格式化分数分页中的当前数字formatFractionTotal(number)
参数,用于格式化分数分页中的总数字swipeBack
有时滑动到错误幻灯片的问题iOSEdgeSwipeDetection
检测错误的问题。感谢 @langjunconsole.log
清理.update()
方法时,尊重并更新断点progressbarOpposite
,用于使分页进度条与 direction
参数相反,这意味着水平 Swiper 方向的垂直进度条和垂直 Swiper 方向的水平进度条loop
+ freeMode
中循环未正确设置的问题swiper.updateAutoHeight(speed)
现在支持 speed
参数,以根据持续时间调整 swiper 包装器大小freeModeSticky
无法吸附到最近吸附点的问题swiper.slideToClosest()
方法,用于在幻灯片处于中间位置时滑动到最近的吸附点noSwipingSelector
,可用于替代 noSwipingClass
preventIntercationOnTransition
,用于在幻灯片切换过渡期间阻止交互.slideToLoop
,用于循环模式slideChange
事件的问题draggable
时,不需要启用 simulateTouch
watchOverflow
(默认禁用)。启用后,如果幻灯片不足以滑动,Swiper 将被禁用并隐藏导航按钮reverseDirection
,用于启用反向自动播放waitForTransition
,自动播放将等待包装器过渡才能继续(默认启用)。在您的滑块可能没有过渡的情况下,可以禁用虚拟翻译onlyInViewport
参数(默认启用)。启用后,它将控制当前在视口中的滑块。touchReleaseOnEdges
未能正确工作的问题。dragSize
时滚动条拖动不正确的问题。iOSEdgeSwipeDetection
也将考虑右边缘滑动。freeModeSticky
的行为。breakpoint
事件。noSwiping
参数未能工作的问题。slidesPerGroup
参数。breakpoints
时某些效果被破坏的问题。document
对象,更好地兼容 SSR。slidesPerView: 'auto'
时最后一个分页按钮未激活的问题。build-dev
-> build:dev
,build-prod
-> build:prod
。beforeResize
事件。realIndex
的计算顺序。swiper.module.js
-> swiper.esm.bundle.js
(默认导出)。swiper.modular.js
-> swiper.esm.js
。swiper.module.js
- 用于 import Swiper from 'swiper'
的 swiper 包。swiper.modular.js
- 用于仅使用所需组件的 Swiper 模块化版本。scripts/build-config.js
用于创建具有所需组件和自定义颜色主题的自定义 Swiper 构建。onAfterResize
和 onBeforeResize
回调。onKeyPress
回调。gulp custom -zoom,effects,lazy-loading
。<div class="swiper-slide">
<div class="swiper-zoom-container">
<img src="path/to/image">
</div>
</div>
zoom
- 启用缩放功能。zoomMax
- 最大图像缩放倍数,默认为 3
。zoomMin
- 最小图像缩放倍数,默认为 1
。zoomToggle
- 启用/禁用双击幻灯片进行缩放。zoomMax
也可以通过在特定幻灯片上使用 data-swiper-zoom
属性进行覆盖。swiper.enableTouchControl()
和 swiper.disableTouchControl()
方法来启用/禁用触摸控制(它会切换 onlyExternal
参数)。swiper.activeIndex
之外,新增 swiper.realIndex
属性,它返回考虑循环的活动幻灯片的索引。history
参数。它使用 history pushState 来设置活动幻灯片 URL。hashnavWatchState
参数,用于通过浏览器历史记录或直接设置文档位置上的哈希值来导航幻灯片(当哈希导航启用时)。replaceState
参数,与哈希导航或历史记录一起使用,用新的 URL 状态替换当前 URL 状态,而不是将其添加到历史记录中。s.unsetGrabCursor()
和 s.setGrabCursor()
来启用/禁用抓取光标。simulateTouch:false
时,可拖动滚动条现在可以工作。normalizeSlideIndex
参数以改进控制器的工作(参见 #1766)。lazyLoadingInPrevNextAmount
现在与 slidesPerView: 'auto'
一起工作。passiveListeners
参数,用于使用被动事件监听器以提高移动设备上的滚动性能。默认启用。freeModeMomentumVelocityRatio
参数来控制动量速度。data-swiper-autoplay
属性来为每个(或特定)幻灯片指定自动播放延迟。sizes
响应式图像属性。mousewheelEventsTarged
参数(默认为 'container'),您可以在其中指定鼠标滚轮事件目标。onScroll
事件/回调,当使用鼠标滚轮进行滑动/滚动时触发。touchReleaseOnEdges
参数,用于在滑块边缘位置(开始、结束)释放触摸事件,并允许进一步页面滚动。paginationBulletRender
现在接受 swiper
实例作为第一个参数,paginationBulletRender(index, className)
-> paginationBulletRender(swiper, index, className)
。uniqueNavElements
参数。如果启用(默认),并且导航元素的参数以字符串形式传递(例如 .pagination
),那么 Swiper 将首先通过子元素查找这些元素。适用于分页、上一个/下一个按钮和滚动条。onPaginationRendered
回调。将在分页元素生成并添加到 DOM 后触发。.reLoop()
方法,它结合了 .destroyLoop()
+ .createLoop()
方法,并附带额外的定位修复。在更改 slidesPerView
参数后调用非常有用,它将动态重新创建循环所需的重复幻灯片。.nextButton
和 .prevButton
属性,其中包含带上一个/下一个按钮 HTML 元素的 Dom7/jQuery 元素。slidesPerView/Group
参数时的问题。paginationType
- 分页类型。可以是 'bullets'
(默认)或 'fraction'
或 'progress'
或 'custom'
。paginationFractionRender(swiper, currentClass, totalClass)
- 渲染“fraction”类型分页的自定义函数。paginationProgressRender(swiper, progressbarClass)
- 渲染“progress”类型分页的自定义函数。paginationCustomRender(swiper, current, total)
- 渲染“custom”类型分页的自定义函数。lazyLoadingInPrevNextAmount
参数,允许在指定数量的下一个/上一个幻灯片中懒加载图像。autoplayStopOnLast
参数(默认为 true
),指示自动播放是否应在最后一张幻灯片停止或从第一张幻灯片开始。onAutoplay(swiper)
回调。mousewheelControl
的问题。autoHeight: true
参数启用。setWrapperTranslate
后滚动条未更新的问题。新增使用 breakpoints
参数的响应式断点支持。现在您可以为不同的尺寸指定不同的 slidesPerView
和其他类似参数。
slidesPerView: 5,
spaceBetween: 50,
breakpoints: {
1024: {
slidesPerView: 4,
spaceBetween: 40
},
768: {
slidesPerView: 3,
spaceBetween: 30
},
320: {
slidesPerView: 1,
spaceBetween: 10
}
}
新增回调:onSlideNextStart
、onSlideNextEnd
、onSlidePrevStart
、onSlidePrevEnd
。
添加了 Meteor 包 meteor add nolimits4web:swiper
。
修复了鼠标 touchMove/End 回调一直触发的问题。
修复了 Chrome 中鼠标滚轮的问题。
小幅修复
undefined
-src 图像的问题。slideToClickedSlide
与 loop
和 centeredSlides
一起使用时的问题。slidesPerView * slidesPerColumn
且 slidesPerColumnFill: 'row'
时,幻灯片填充不正确的问题。data-srcset
属性懒加载图像 srcset
的支持。WebkitCSSMatrix
的错误。slideToClickedSlide
与 loop
和 centeredSlides
一起使用时的问题。freeModeMinimumVelocity
参数,用于设置触发自由模式动量所需的最小触摸速度。scrollbarDraggable
- (布尔值) 默认为 false
。允许启用可拖动滚动条。scrollbarSnapOnRelease
- (布尔值) 默认为 false
。控制滚动条释放时滑块的吸附。slidesPerView: 'auto'
和启用 loop:true
模式时,默认设置 loopedSlides
为幻灯片数量(如果未指定)的问题。mousewheelSensitivity: 1
参数,允许调整鼠标滚轮灵敏度。allowSwipeToNext
/allowSwipeToPrev
)时,swiper 更新的问题。centeredSlides
时“可见”幻灯片计算不正确的问题。iOSEdgeSwipeDetection
(默认为 false
) - 启用 iOS 边缘检测并释放 Swiper 事件。iOSEdgeSwipeThreshold
(默认值为 20
) - 屏幕左边缘的 px
区域,用于释放事件。paginationBulletMessage: 'Go to slide {{index}}'
。controlBy
,可以是 'slide'(默认)或 'container'。定义了控制另一个滑块的方式:逐个幻灯片或根据所有幻灯片/容器(像以前一样)。controlBy: 'slide'
(默认)模式下的控制器将相互尊重网格。paginationElement
参数,定义将用于表示单个分页子弹的 HTML 标签。默认是 span
。roundLengths
参数(默认为 false
),用于对幻灯片宽度和高度值进行四舍五入,以防止在常规分辨率屏幕上出现模糊文本。slidesOffsetBefore: 0
和 slidesOffsetAfter: 0
(以 px 为单位) 参数,用于在容器内添加额外的幻灯片偏移。.swiper-container
上时,对幻灯片尺寸进行正确计算。onResize
处理程序不工作的问题。onlyExternal
时出现的“跳跃”效果问题。swiper.jquery.umd.js
,用于同时包含 Swiper 和 jQuery 作为模块的环境。mousewheelReleaseOnEdges
- 当 swiper 位于边缘位置(开始或结束)时,将释放鼠标滚轮事件并允许页面滚动。mousewheelInvert
- 反转鼠标滚轮幻灯片的选项。slidesPerView
> 1 时,下一张幻灯片懒加载的问题。slidesPerColumn
> 1 时)幻灯片顺序错误的问题。width
和 height
参数,用于强制 Swiper 大小,在初始化时隐藏时非常有用。data-background
属性的必需元素的背景图像添加了懒加载。freeModeSticky
参数),它将在自由模式下吸附到幻灯片位置。.destroy(deleteInstance, cleanupStyles)
方法现在有第二个 cleanupStyles
参数,当传递时,将从幻灯片、包裹器和容器中删除所有自定义样式。如果您需要销毁 Swiper 并用新选项或不同方向重新初始化时非常有用。a11y: false
- 启用无障碍访问。prevSlideMessage: 'Previous slide'
- 上一个按钮的屏幕阅读器消息。nextSlideMessage: 'Next slide'
- 下一个按钮的屏幕阅读器消息。firstSlideMessage: 'This is the first slide'
- 当 swiper 位于第一张幻灯片时,上一个按钮的屏幕阅读器消息。lastSlideMessage: 'This is the last slide'
- 当 swiper 位于最后一张幻灯片时,下一个按钮的屏幕阅读器消息。.on(event, handler)
- 添加事件/回调。.off(event, handler)
- 移除此事件/回调。.once(event, handler)
- 添加将只执行一次的事件/回调。setWrapperSize
(默认为 false
),以提供与不支持 flexbox 的浏览器的更好兼容性。启用此选项后,插件将设置 swiper 包裹器的宽度/高度等于所有幻灯片的总大小。virtualTranslate
参数。启用后,swiper 将像往常一样操作,只是它不会移动。当您可能需要创建自定义幻灯片过渡时非常有用。onLazyImage...
回调。slidesPerGroup
时分页子弹的行为。lazyLoading
、lazyLoadingInPrevNext
、lazyLoadingOnTransitionStart
(所有默认禁用)。onLazyImageLoad
和 onLazyImageReady
。updateOnImages
ready 分成 2 个参数。
preloadImages
(默认为 true)- 在 swiper 初始化时预加载所有图像。updateOnImages
(默认为 true)- 所有图像加载后更新 swiper。onObserverUpdate
回调函数,用于在观察者更新后调用。paginationBulletRender
参数,接受一个函数,允许自定义分页元素的布局。runCallbacksOnInit
参数运行回调。watchVisibility
参数重命名为 watchSlidesVisibility
。crossFade
选项。.update
方法改进,以完全覆盖 onResize
的功能,实现完整且正确的更新。swiper.touches
对象,包含以下属性:startX
、startY
、currentX
、currentY
、diff
。.removeSlide(index)
或 .removeSlide([indexes])
- 删除选定的幻灯片。.removeAllSlides()
- 删除所有幻灯片。overflow: auto
和 -webkit-overflow-scrolling: touch
。slidesPerColumn
选项的多行幻灯片布局。border-box
,因此可以直接在幻灯片上使用边框和内边距。slidesPerView: 'auto'
) 现在提供更大的自由度,您甚至可以以 % 指定幻灯片大小并在其上使用边距。