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

努力挣钱的小鑫

已于 2023-12-15 09:49:33 修改

阅读量2.3k

点赞数 2

分类专栏： Vue.js 文章标签： swiper

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

本文链接：https://blog.csdn.net/IAIPython/article/details/134426102

版权

Vue.js 专栏收录该内容

56 篇文章

订阅专栏

上午把官网的合作伙伴做了，好坑，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" :virtualIndex="index">
            <div class="partner-card">
              <img v-if="index < 8" :src="`partner/1-${index + 1}.png`" alt="" />
              <img v-else :src="`partner/1-${index + 1 - 5}.png`" alt="" />
            </div>
            <div class="partner-card">
              <img v-if="index < 8" :src="`partner/2-${index + 1}.png`" alt="" />
              <img v-else :src="`partner/2-${index + 1 - 5}.png`" alt="" />
            </div>
            <div class="partner-card">
              <img v-if="index < 8" :src="`partner/3-${index + 1}.png`" alt="" />
              <img v-else :src="`partner/3-${index + 1 - 5}.png`" alt="" />
            </div>
            <div class="partner-card">
              <img v-if="index < 8" :src="`partner/4-${index + 1}.png`" alt="" />
              <img v-else :src="`partner/4-${index + 1 - 5}.png`" alt="" />
            </div>
          </SwiperSlide>
        </Swiper>

    :deep(.swiper-wrapper) {
      transition-timing-function: linear !important; /* 没错就是这个属性 */
    }

感谢

如何使Swiper的无限自动轮播更流畅，没有停顿感！
Swiper.js实现无缝滚动