第三步:当然呐,或许你在想内容呐,别急,为了大家的方便内容的写法我也会提供
(for循环)(tip:可以把for循环换成正常展示图片,如下面展示方法,每张图对应的放进去,分页器是可以用的,for循环这样分页器是无法显示与切换的)
(当然,你也可以根据上面for循环里有几条数据添加几个这个div,img路径可有可无,有也不会展示,分页器是根据swiper-slide判断显示与切换轮播的)
(分页器)
vue初始化请求里添加该方法
mounted(){
varthat=this;
that.$nextTick(function(){
varmySwiper=newSwiper(".swiper-container",{
direction:"horizontal",/*横向滑动*/
loop:true,形成环路（即：可以从最后一张图跳转到第一张图
pagination:".swiper-pagination",/*分页器*/
autoplay:3000/*每隔3秒自动播放*/
});
})
},
css就不多说了,控制大小应该都会.
接下来说第二个正确且简单的方法
正确:
第一步:安装 npmivue-awesome-swiper--save(这一个是否安装根据实际情况,如果安装上一个你用没效果也要安装这个=> npmiswiper)
第二步:在main.js文件里引入
importVueAwesomeSwiperfrom'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
在当前页面引入
importSwiperfrom'swiper';
import'swiper/dist/css/swiper.min.css';
第三步;
(分页器)
在data里定义轮播图
swiperOption:{
pagination:'.swiper-pagination',
paginationClickable:true,
autoplay:2500,
autoplayDisableOnInteraction:false,
loop:false,
coverflow:{(轮播图切换方式)
rotate:30,
stretch:10,
depth:60,
modifier:2,
slideShadows:true
}
},
关于swiper在vue里的分享就到这里了,各位用的感觉阔以的帮忙点个赞呗,毕竟写了这么多,嘿嘿.关于swiper常用的目前踩到的坑就在这里,后续有会持续更新哟
补充一下：swiper在vue中的用法