如何在Vue项目中使用Swiper插件
* Vue-Awesome-Swiper基于 Swiper4、适用于 Vue 的轮播组件,支持服务端渲染和单页应用。如果需要回退到 Swiper3,请使用 v2.6.7 版本。可参考github官网,搜索swiper!1:命令行安装swiper npm install vue-awesome-swiper --save2:在项目main.js中写入以下代码 i...
·
* Vue-Awesome-Swiper
基于 Swiper4、适用于 Vue 的轮播组件,支持服务端渲染和单页应用。
如果需要回退到 Swiper3,请使用 v2.6.7 版本。
可参考github官网,搜索swiper!
1:命令行安装swiper
npm install vue-awesome-swiper --save
2:在项目main.js中写入以下代码
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
3:使用代码Swiper

:options:变量的绑定,需在data里面定义一个这样的数据

若想对图形排序进行左右滑动,需要计算图片的排列(即:一个页面要显示几个图片)

在此就完成了~~~代码仅供参考,表达不太清晰请原谅~~~~~~
最后奉上本人所做页面的显示效果图


只可意会不可言传(语言描述有限)~~~~自个慢慢体会吧!不喜勿喷,谢谢!
更多推荐



所有评论(0)