vue使用轮播图插件vue-awesome-swiper
案例,我目前使用的是vue2版本的2.6,安装vue-awesome-swiper是3.1.3版本的
第一步:
在项目中使用
npm install vue-awesome-swiper --save
如果要指定我的版本就用
npm install vue-awesome-swiper@3.1.3 --save
![](https://img2022.cnblogs.com/blog/2170636/202209/2170636-20220925164942042-168781402.png)
这里面会有你的项目
然后再直接在项目导入,可以局部导入和全局导入,我用的是局部导入使用
重点是,这个是在里面文件夹找不到的,js会自动查找的
import 'swiper/dist/css/swiper.css'
一定要一样,
swiper和swiperSlide要注册一下就可以使用了
![](https://img2022.cnblogs.com/blog/2170636/202209/2170636-20220925165413255-572367153.png)
:options绑定一个对象,在里面的配置就是swiper里面的配,上一个截图data里面有
官网文档
https://github.com/surmon-china/vue-awesome-swiper/tree/v3.1.3。
options参数那些可以直接看swiper的官网就行