🎄🎅 节日促销:高达 50% OFF UI Initiative, Swiper Studio t0ggles 🎅🎄

Swiper v11 - 回归基础

2023年10月24日

我们非常激动地推出最新更新:Swiper v11。但这不仅仅是一次普通的更新。在 v11 中,我们迈出了重要一步——我们正在“回归基础”。

触摸事件

为了使 Swiper 成为移动触摸滑块的首选库,我们不断努力,尝试各种途径,并始终致力于为开发人员和最终用户提供最佳体验。我们采取的一个方向是在 Swiper v9 中转向指针事件,我们认为这是统一处理触摸和鼠标事件的最佳方案。

然而,我们注意到,虽然指针事件无疑具有革命性,但在某些边缘情况下,它们并不总是能提供我们期望的无缝触摸体验。来自我们社区的反馈以及我们严格的测试突显了触摸交互的一些细微之处和局限性。

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

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

  • 在支持触摸事件的设备(iOS/Android)上,edgeSwipeDetectiontouchReleaseOnEdges 参数现在可以正常工作
  • 改进了页面滚动检测和防止

循环模式

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

  • 增加了对 grid.rows 的多行布局的支持
  • 删除了 loopedSlides 参数
  • 添加了 loopAdditionalSlides 参数,而不是为“循环”(重新排列)定义额外的幻灯片
  • 新的 loopAddBlankSlides 参数,它将自动为 slidesPerGroupgrid.rows 添加空幻灯片
  • 对幻灯片数量的新宽松要求
    • 幻灯片的最小数量必须 >= slidesPerView + slidesPerGroup
    • 幻灯片的数量应为 slidesPerGroup 的偶数倍(或使用 loopAddBlankSlides 参数)
    • 幻灯片的数量应为 grid.rows 的偶数倍(或使用 loopAddBlankSlides 参数)

例如,如果我们有 slidesPerView: 3,在 v10 中,我们需要至少 6 个幻灯片才能实现循环模式。在 v11 中,我们现在只需要 4 个幻灯片即可实现。

元素事件前缀

Swiper Element 使用与 Swiper 类事件相同的事件名称发出原生 DOM 事件。如果第三方库使用了类似的原生 DOM 事件,如 touchstarttouchmove 等,则会造成问题。因此,在 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 恢复为 overflow: hidden

接下来是什么?

以上是大多数重大更改和新功能的概述。

有关所有更改列表,请参阅完整的 v11 更新日志

建议查看v11 迁移指南

附言

和往常一样,如果您喜欢 Swiper,请通过捐赠或承诺来支持该项目

并查看我们的高级项目

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