Swiper v11 - 返璞归真

2023年10月24日

我们非常激动地推出最新更新：Swiper v11。但这不仅仅是一次普通的更新。通过 v11，我们迈出了重要一步——我们正在“返璞归真”。

触摸事件

为了让 Swiper 成为移动触控滑块的首选库，我们不断努力，尝试了各种途径，试验了多种技术，始终致力于为开发者和最终用户提供最佳体验。我们采取的一个方向是在 Swiper v9 中转向 Pointer Events，认为这是统一处理触摸和鼠标事件的最佳方案。

然而，我们注意到，尽管 Pointer Events 无疑具有革命性，但在某些极端情况下，它们并不能始终提供我们所追求的无缝触摸体验。来自社区的反馈，加上我们严谨的测试，突显了触摸交互的一些细微差别和局限性。

鉴于我们对卓越用户体验的承诺，我们决定在 v11 中重新引入对触摸事件的支持（在支持的情况下）。通过“返璞归真”，我们确保那些极端情况，那些需要触感恰到好处的微小时刻，都能得到完美满足。

至少它将修复并改进以下情况：

现在在支持触摸事件的设备（iOS/Android）上，edgeSwipeDetection 和 touchReleaseOnEdges 参数可以正常工作了
改进了页面滚动检测和阻止

循环模式

循环模式在 v11 中得到了显著改进

增加了对带有 grid.rows 的多行布局的支持
移除了 loopedSlides 参数
增加了 loopAdditionalSlides 参数，以替代定义用于“循环”（重新排列）的附加幻灯片
新的 loopAddBlankSlides 参数将为 slidesPerGroup 和 grid.rows 自动添加空白幻灯片
对幻灯片数量的新宽松要求
- 最小幻灯片数量必须 >= slidesPerView + slidesPerGroup
- 幻灯片数量应与 slidesPerGroup 保持一致（或使用 loopAddBlankSlides 参数）
- 幻灯片数量应与 grid.rows 保持一致（或使用 loopAddBlankSlides 参数）

例如，如果我们的 slidesPerView: 3，在 v10 中我们需要至少 6 张幻灯片才能进入循环模式。在 v11 中，我们现在只需要 4 张幻灯片即可。

元素事件前缀

Swiper Element 使用与 Swiper 类事件相同的事件名称触发原生 DOM 事件。如果第三方库使用了类似的本地 DOM 事件，例如 touchstart、touchmove 等，这会导致问题。因此，在 v11 中，所有 Swiper Element 事件现在都带有 swiper 前缀（可在 eventsPrefix 参数中配置）。

现在可以这样使用

<swiper-container> ... </swiper-container>
<script>
  const swiperEl = document.querySelector('swiper-container');

  // listen for `slideChange` event
  swiperEl.addEventListener('swiperslidechange', onSlideChange);
</script>

溢出隐藏

在 Swiper v10 中，容器的 overflow 属性默认为 clip。事实证明，并非所有浏览器都正确支持此属性，因此在 v11 中，我们将默认的 Swiper 容器样式恢复为 overflow: hidden。

接下来是什么？

以上是大部分重要变更和新功能的概述。

有关所有变更列表，请参阅完整的 v11 变更日志。

建议查看v11 迁移指南。

附注

一如既往，如果您喜欢 Swiper，请通过捐赠或认捐来支持项目

在 Patreon 上：https://www.patreon.com/swiperjs
在 Open Collective 上：https://opencollective.com/swiper

并查看我们的高级项目

您的支持对我们意义重大！

在 GitHub 上编辑此页面