Swiper 11 迁移指南

循环模式

¥Loop Mode

循环模式在 v11 中得到了显著改进，这里只有一个重大变更需要注意：

¥Loop mode has been seriously improved in v11, there is only one breaking change to pay attention here:

• loopedSlides 参数已被移除。如果这破坏了你的滑块循环行为 - 尝试使用新的 loopAdditionalSlides 参数

  ¥loopedSlides parameter has been removed. If it breaks your slider loop behavior - try to use new loopAdditionalSlides parameter

元素事件前缀

¥Element Events Prefix

所有 Swiper 元素事件现在默认都以 swiper 为前缀。你需要修改代码以监听新事件，或者通过指定 eventsPrefix: ''（空字符串）参数回滚到之前的行为。

¥All Swiper Element events are prefixed now with swiper by default. You need to modify your code to listen for new events or roll back to previous behavior by specifying eventsPrefix: '' (empty string) parameter.

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

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

溢出隐藏

¥Overflow Hidden

在 Swiper v11 中，容器的 CSS 属性 overflow 默认为 hidden。如果这破坏了你的布局，只需添加自定义 CSS 样式即可：

¥In Swiper v11, the overflow CSS property of the container defaulted to hidden. If it breaks your layout, just add custom CSS styles:

.swiper {
  overflow: clip;
}