Swiper 11 迁移指南

循环模式

循环模式在 v11 中得到了极大的改进,这里只存在一个需要关注的重大更改

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

元素事件前缀

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

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

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

溢出隐藏

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

.swiper {
  overflow: clip;
}