之前引入组件比较成功 我们来配置一些属性
<swiper :options="swiperOption">
<swiper-slide class="swiper-slide" v-for="(item,index) in slide" :key="index">
slide{{item}}
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div> //分页
<div class="swiper-button-prev" slot="button-prev"></div> //箭头左
<div class="swiper-button-next" slot="button-next"></div> //箭头右
</swiper>
第一篇链接：https://www.jianshu.com/p/45f3b6925250
在data中通过对swiperOption的属性进行对swiper的操作
data(){
return {
slide:[1,2,3,4,5], //定义一个小数组用来区分,
//设置属性
swiperOption:{
//显示分页
pagination: {
el: '.swiper-pagination',
clickable:true //允许分页点击跳转
},
//设置点击箭头
navigation: {
nextEl: '.swiper-button-next', //前进按钮的css选择器或HTML元素。
prevEl: '.swiper-button-prev', //后退按钮的css选择器或HTML元素。
},
autoplay:{ //自动轮播
delay:4000 //轮播时间
},
//开启无限循环模式
loop:true,
//开启鼠标滚轮控制Swiper切换。可设置鼠标选项，或true使用默认值。
mousewheel:true ,
}
}
}
}
