如何在Vue项目中使用Swiper插件

本文介绍如何使用Vue-Awesome-Swiper组件,基于Swiper4,支持服务端渲染和单页应用。文章提供了详细的安装步骤及在main.js中的引入方式,适合希望在Vue项目中加入轮播功能的开发者。

* 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里面定义一个这样的数据

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

  在此就完成了~~~代码仅供参考,表达不太清晰请原谅~~~~~~

最后奉上本人所做页面的显示效果图

 

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

潔19

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值