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

Swiper 11 迁移指南

循环模式

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

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

元素事件前缀

所有 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 v11 中,容器的 overflow CSS 属性默认为 hidden。如果它破坏了你的布局,只需添加自定义 CSS 样式

.swiper {
  overflow: clip;
}