Vue以CDN方式调用Swiper轮播异常
2024-08-20 11:54:35
问题概览：
有一个小型单页应用项目，嫌用组件式调用vue-swiper麻烦，因此以CDN的方式调用swiper，结果轮播的图不动了！
爬了半天百度和谷歌都无解决方案，最后曲线救国的方式解决了问题。
解决方法：
在创建swiper时为其设置一个定时器即可解决问题！
bottleLineMove = () => {
setTimeout(() => {
this.bottleSwiperOne = new Swiper('#bottleLineOne', {
loop: true,
slidesPerView: 4,
spaceBetween: 10,
// centeredSlides: true,
autoplay: {
delay: 2000,
disableOnInteraction: false,
},
})
this.bottleSwiperTwo = new Swiper('#bottleLineTwo', {
loop: true,
slidesPerView: 4,
spaceBetween: 10,
// freeMode: true,
autoplay: {
delay: 2000,
disableOnInteraction: false,
},
})
}, 10)
}
最后，嘻嘻！
最新文章
- JavaScript模板引擎artTemplate.js——template()方法
- linux内核调度算法（2）--CPU时间片如何分配 转！
- 今天我们要说的画一个三角形，恩，画一个三角形，第一种呢是利用我们的html标签结合css来实现；而第二种方法就就是我们的html5新增的一个标签canves,这个canves就是网页画幕，那么顾名思义就是在网页里建造一个画板，用来画画，好，那接下来就和我一起去看看吧！
- WebApi系列~安全校验中的防篡改和防复用
- 几个简单的js正则验证
- 学习C++.Primer.Plus 4 复合类型
- JDK的安装和配置
- Oracle-创建服务器参数文件
- 为网站添加网址图标favicon.ico
- InnoTop
- （MVC）验证用户是否登录 登录认证
- Java system.getproperty获取环境属性
- Servlet的学习之Filter过滤器技术(1)
- Java 散知识
- kafka学习笔记2:生产者
- CentOS 安装Docker
- 配置javaJDK环境
- Python 进阶 异步async/await
- .NET Core+NLog+存储配置 日志存入到数据库
- 力扣（LeetCode） 821. 字符的最短距离