Vue如何使⽤vue-awesome-swiper实现轮播效果在Vue项⽬中如何实现轮播图的效果呢，在传统项⽬中第⼀个想到的⼀般都是swiper插件，代码简单好⽤。⼀开始我也是直接npm安装swiper然后照着之前的传统写法写，然⽽却没有效果，只会显⽰图⽚但没有轮播效果。上⽹查了很多资料也参考其他同⾏的做法，跟着改但是还是没效果。后来发现vue是有⼀个专门的轮播插件：vue-awesome-swiper，下⾯介绍如何⽤这个插件实现轮播效果：
1.安装vue-awesome-swiper插件，具体安装⽅法请点击这⾥：。
2.在main.js中引⼊这个插件：
3.⽤swiper，swiperSlide组件写template模板：
我是⽤v-for遍历data⾥的数组来形成轮播图的，也可以不使⽤v-for直接写多个swiper-slide组件。如果使⽤遍历的⽅法需要注意的是必须要加上:key="item.id"，否则会报错。（PS：如何在data中正确引⼊图⽚路径在我上⼀篇博⽂中有详细叙述，）
4.这⼀步是最重要的，设置轮播的初始化，我只写了基本的常⽤swiper轮播属性，有特殊需求的可以去看具体的api，在这⼀步已经实现了基本的轮播效果，但是页⾯样式会让你皱眉，很多⽹上的教程在这⼀步就⽌步了，然后你会发现页⾯上的轮播图是⼀⼤块的，轮播⼀下就看到空⽩，这是因为没有引⼊vue-a
wesome-swiper的样式，有的朋友说npm安装vue-awesome-swiper时会有两个⽂件夹，⼀个是vue-awesome-swiper⽂件夹，⼀个是swiper⽂件夹。⽽我安装时只有⼀个vue-awesome-swiper⽂件夹，所以我是再npm安装swiper，然后直接import引⼊swiper.css，即在下⾯截图第17⾏处换⾏写import 'swiper/dist/css/swiper.css';，
angular安装
如果觉得这样路径太⿇烦，可以将swiper.css复制到static⽂件夹再引⼊，具体script如下图所⽰：
到了这⾥实现轮播效果已经成功，但是你⿏标操作是没有效果的，如果需要⿏标移上停⽌轮播，⿏标移出继续轮播，那么请继续往下看。
5.我们在⽤jq或angular写轮播插件都知道必须要实例化swiper，在vue中操作swiper对象也是⼀样：
注意：实例化swiper的时候data⾥的swiperOption对象⾥notNextTick必须为true，否则是会出错的，另外我们的⿏标移上移出事件是写在swiper-slide组件上的，正常写法是不起作⽤的，需要加上.native才能⽣效，具体原因在vue官⽹上有说明。
这个轮播效果是我亲测有效才发出来的，希望对⼤家有帮助。
如需转载请注明出处：，以便有错误可以及时修改，若有错漏不⾜之处，请见谅并且指点，谢谢

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。