Vue使用swiper

这里是老衲自己写的,在我这测试是没有 任何毛病的,错了什么的勿喷.
我是直接在页面里面写的然后在App.vue引入的,这里给提醒下。
Vue使用Swiper 这里先要在小黑板里下载即 npm i swiper
下载完城后node_modules文件夹下会生成一个swiper文件夹,就是下载成功了。
然后在当前使用的的页面引用
import Swiper from ‘swiper’;
import ‘swiper/dist/css/swiper.min.css’;第二个引入文件不一定是这个目录(切记切记,老衲纠结了好一阵子老报错,最后才发现路径没对),你要从当前文件的路径找到swiper文件夹(上面下载好的)
老衲的是import ‘…/…/node_modules/swiper/dist/css/swiper.min.css’ 这个路径
复制粘贴不一定能用,自己小心。
然后
mounted(){
var mySwiper = new Swiper(’.swiper-container’, {
autoplay:true,
loop:true,
// 如果需要分页器
pagination: {
el: ‘.swiper-pagination’,
},
// 如果需要前进后退按钮
navigation: {
nextEl: ‘.swiper-button-next’,
prevEl: ‘.swiper-button-prev’,
},
// 如果需要滚动条
})
},
里面有很多参数需要在HTML里面配置类似于这样
< div class=“swiper-pagination swiprRem”></ div> 分页器
< div class="swiper-button-next "></ div> 左右切换按钮
< div class="swiper-button-prev "></ div>
多打了一个空格不然显示不出来 这里不多说
如果还需要什么配置 去官方Api里面去查里面挺全的。
全部代码:
在这里插入图片描述
在这里插入图片描述

下面没写完,还有一些api什么的如果需要的话模仿着去Swiper网站去查查
https://www.swiper.com.cn/usage/index.html
这个直接网站可以模仿着用。

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

__不靠谱先生

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

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

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

打赏作者

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

抵扣说明:

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

余额充值