这里是老衲自己写的,在我这测试是没有 任何毛病的,错了什么的勿喷.
我是直接在页面里面写的然后在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
这个直接网站可以模仿着用。