【Swiper 】Vue3 中 Swiper 插件 loop 无限滚动、并且暂停的问题

原创

已于 2023-12-15 09:49:33 修改 · 2.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#swiper

于 2023-11-15 18:16:02 首次发布

文章讨论了在使用Swiper组件时，确保自动滚动功能流畅的关键在于slides-per-view的设定需小于等于SwiperSlide组件的实际渲染数量。官网未明示这一限制可能导致滚动问题。

上午把官网的合作伙伴做了，好坑，swiper 自动滚动展示的数量 slides-per-view 的两倍必须小于等于 *SwiperSlide* 组件的渲染数量，才能进行自动滚动，官网居然都没有说。
比如 slidesPerView = 6，那么 SwiperSlide 组件渲染的数量必须大于等于 6 的 2 倍，否则无法自动无限滚动！

    <Swiper
          @swiper="onSwiper"
          :autoplay="{ delay: 0, disableOnInteraction: false, stopOnLastSlide: false }"
          :modules="[Autoplay]"
          :slides-per-view="6"
          :loop="true"
          :speed="1500"
        >
          <SwiperSlide v-for="(item, index) in 12" :key="index