SwiperSwiperv11.1.1

Swiper v11 - 回归基础

2023 年 10 月 24 日

我们非常高兴地推出我们的最新更新：Swiper v11。但这不仅仅是一次更新。借助 v11，我们迈出了重要一步——我们正在“回归基础”。

触摸事件

在我们持续努力将 Swiper 打造成移动触控滑块的首选库的过程中，我们遍历了各种途径、试验了各种技术，并始终致力于为开发人员和最终用户提供最佳体验。我们采取的一个方向是在 Swiper v9 中转向指针事件，相信这是统一处理触控和鼠标事件的最佳行动方案。

然而，我们注意到，虽然指针事件无疑具有革命性，但在某些边缘情况下，它们并不总是能提供我们所追求的无缝触控体验。来自我们社区的反馈，加上我们严格的测试，突出了触控交互中的一些细微差别和局限性。

鉴于我们对最佳用户体验的承诺，我们决定在 v11 中重新引入对触控事件的支持（在支持的情况下）。通过“回归基础”，我们确保那些边缘情况、那些触控需要感觉恰到好处的微小时刻得到完美满足。

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

  • edgeSwipeDetection 和 touchReleaseOnEdges 参数现在在支持触控事件的设备（iOS/Android）上正常工作
  • 改进了页面滚动检测和预防

循环模式

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 迁移指南。

P.S.

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

并查看我们的高级项目

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

在 GitHub 上编辑此页面