当前位置: 首页 > news >正文

【Vue】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实现无缝滚动

http://www.lryc.cn/news/230863.html

相关文章:

  • MySQL的DATE_FORMAT函数使用
  • MySQL的SQL预编译及防SQL注入
  • 博流BL602芯片 - 烧录配置
  • websocket实现实时数据推送,发布订阅重连单点登录功能
  • 前端代理模式之【策略模式】
  • 人工智能-深度学习之残差网络(ResNet)
  • arm2 day6
  • RxSwift和Combine的相同点和使用例子
  • [Linux打怪升级之路]-信号的保存和递达
  • 【科研新手指南3】chatgpt辅助论文优化表达
  • 在应用内维护域名缓存时遇到的问题
  • 网络支付安全:面临的风险与防范策略
  • 『亚马逊云科技产品测评』活动征文|阿里云服务器亚马逊服务器综合评测
  • javascript原来还可以这样比较两个日期(直接使用new Date)
  • [云原生案例2.4 ] Kubernetes的部署安装 【通过Kubeadm部署Kubernetes高可用集群】
  • PP-ChatOCRv2、PP-TSv2、大模型半监督学习工具...PaddleX新特性等你来pick!
  • HarmonyOS 学习记录
  • 阿里云 业务集群的冗余、备份、监控方案
  • 无人驾驶的未来 后疫情时代如何抵达
  • (论文阅读31/100)Stacked hourglass networks for human pose estimation
  • 【第2章 Node.js基础】2.6 Node.js 的Buffer数据类型
  • reactive和effect,依赖收集触发依赖
  • 【C#学习】backgroundWorker控件
  • Istio学习笔记-部署模型
  • 磁盘调度算法
  • 力扣题库2. 两数相加
  • 【Linux】第十六站:进程地址空间
  • 基于Springboot的影城管理系统(有报告)。Javaee项目,springboot项目。
  • 如何在面试中胜出?接口自动化面试题安排上
  • 联邦学习研究综述笔记