前言
项目使用到 swiper 插件实现轮播图的功能,引入插件放上数据后,设置自动播放,但是发现没起效果,手动拖动可以
解决方法
安装指定版本
可以安装以下版本的,设置自动播放没有问题正常滚动
"swiper": "^6.2.0"
引入:
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- 组件的内容由父组件传入,并且为 dom 结构时 -->
<slot></slot>
</div>
<!--分页器。如果放置在swiper外面,需要自定义样式。-->
<div class="swiper-pagination"></div>
</div>
</template>
<script>
import Swiper from "swiper/bundle";
import "swiper/swiper-bundle.min.css";
export default {
data() {
return {};
},
mounted() {
new Swiper(".swiper-container", {
autoplay: true,
// 分页器
pagination: {
el: ".swiper-pagination",
},
});
},
};
</script>
最新版本
如果直接运行以下命令就是安装最新版本的,我就是使用这个安装的最新版本,设置自动滚动后不生效
npm i swiper
解决方法:
引入部分需要这样子写,可以解决轮播图自动滚动:
import "swiper/swiper-bundle.min.css";
import Swiper, { Navigation, Pagination, Autoplay } from "swiper";
Swiper.use([Autoplay, Navigation, Pagination]);
mounted() {
var mySwiper = new Swiper(".mySwiper", {
slidesPerView: 5, // 可视个数
spaceBetween: 10, // 间隔
autoplay: {
delay: 1500,
disableOnInteraction: false,
},
loop: true, // 循环模式选项
// 如果需要分页器
// pagination: {
// el: ".swiper-pagination",
// },
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
}
});
},
原文地址:http://www.cnblogs.com/clownblogs/p/16787953.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性