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 字符串来控制rotatethumbs.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 和 loopFixupdateOnWindowResize(默认 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 默认回退为 containertouchcancel 事件的处理 #3219slidesPerColumnFill: 'row' 模式下顺序计算错误的问题cssMode: true 启用)。它不支持 Swiper 的所有功能,但在简单配置中可能会带来更好的性能breakpointsInverse 参数已移除,现在 breakpoints 的行为与以前的 breakpointsInverse: true 相同。touchMoveStopPropagation 参数现在默认为 falseclick 事件不再有 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,可用于替代 noSwipingClasspreventIntercationOnTransition,用于在幻灯片切换过渡期间阻止交互.slideToLoop,用于循环模式slideChange 事件的问题draggable 时,不需要启用 simulateTouchwatchOverflow(默认禁用)。启用后,如果幻灯片不足以滑动,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') 现在提供更大的自由度,您甚至可以以 % 指定幻灯片大小并在其上使用边距。