swiper插件的使用
1.安装
npm install vue-awesome-swiper --save
2.全局引用(main.js)
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)
3.在组件中引用
import { swiper, swiperSlide, directive } from "vue-awesome-swiper";
import "swiper/swiper-bundle.css";
export default {
components: {
swiper,
swiperSlide,
},
}
组件代码
data() {
return {
banners: [
{ name: "11111" },
{ name: "2222" },
{ name: "333" },
{ name: "44444" },
{ name: "55555" },
],
// 轮播图
swiperOption: {
slidesPerView: 3, // 每页展示几条数据
autoplay: true, // 是否自动播放
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
observer: true,
// observeParents: true,
},
};
},
样式可以按照自己的需要写哦
这样一个完整的轮播图就出来了，但是会遇到好多坑
坑1：完成组件安装，引入，注册后，却报错：
Module not found: Error: Can't resolve 'swiper/css/swiper.css' in ...
这是因为版本问题
解决方式如下：
import 'swiper/css/swiper.css'
修改为：
import 'swiper/swiper-bundle.css'
// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'
// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'
坑2：左右箭头点击失效的情况
这还是因为vue-awesome-swiper插件包的版本问题
解决方式如下：
npm uninstall vue-awesome-swiper --save
npm install vue-awesome-swiper@3.1.3 --save
安装完3.1.3的版本后，重新启动查看就解决了
坑3：运行项目时报错Cannot set property 'params' of undefined
因为版本间引入的语句不一致导致的
解决方式如下：
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
修改为：
import { swiper, swiperSlide, directive } from "vue-awesome-swiper";
注意：全局和组件局部引入的都要修改，components里的也别忘了
最后附上轮播图种类网址：https://github.surmon.me/vue-awesome-swiper/
里面有各种各样的轮播图，可以直接复制代码，然后改成自己想要的就ok了~
到这里我遇到的坑解决完了，轮播图也可以正常使用了，如果大家有新的问题可以一起讨论。