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

上午把官网的合作伙伴做了,好坑,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实现无缝滚动

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值