1，基础swiper轮播示例
第一步 安装swiper插件，这里采用npm安装 更多安装方式可去swiper官方网站查询
$ npm install swiper第二步 完成安装后再页面中引入（不要忘了引入swiper.css样式，swiper.min.css文件可以放在assets文件夹）
在main.js页面中加入以下代码
import Swiper from 'swiper' //插件
import'./assets/css/swiper.min.css' //css样式第三步 html结构
<template>
<div id="banner" >
<div class="swiper-container" >
<div class="swiper-wrapper" >
<div class="swiper-slide" v-for="(item,index) in bannerlist">
<img :src="item.img" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</template>
<script>
export default {
name: 'banner',
data() {
return {
bannerlist:[{
"img": require('./../assets/img/xxx.jpg')
},
{
"img": require('./../assets/img/xxx.jpg')
},
{
"img": require('./../assets/img/xxx.jpg')
},
{
"img": require('./../assets/img/xxx.jpg')
},
],
}
},
methods: {
},
components: {
},
mounted: function() {
//配置Swiper 建议关于Swiper配置方面可以前往Swiper官网
new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
},
loop: true,
autoplay: {
delay: 4000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
})
}
}
</script>完成以上步骤你的轮播图应该就能自动轮播了
2，关于动态请求轮播图数据，轮播图组件不能滑动问题
先写一个动态请求数据的轮播图示例（偷点懒）
<script>
export default {
name: 'banner',
data() {
return {
bannerlist:[],
}
},
methods: {
},
components: {
},
mounted: function() {
//配置Swiper 建议关于Swiper配置方面可以前往Swiper官网
new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
},
loop: true,
autoplay: {
delay: 4000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
observer:true,//很重要
})
//这里采用axios请求 axios请求需要安装插件
var _this = this
_this.axios({
method: 'get',
url: '轮播图接口'
}).then(function(res) {
_this.bannerlist=res.data.data //请求出来的轮播图数据
}).catch(function(err) {
console.log(err)
})
}
}
</script>以上是轮播图动态获取数据
关于轮播图动态获取数据出现swiper轮播图不能正常滑动而图片能正常显示问题，
这是因为swiper绑定的数据bannerlist初始是为空的，所以页面初始化时swiper会认为所需要的滑动个数为0（不知道这样说正确不），即便后来的请求加入数据但swiper的滑动是没有变的，所以就会出现明明有图片却不能滑动问题。
解决办法 在swiper配置中加上 observer:true, 这样就能解决不能完全正确滑动问题
关于 observer:true详情前往swiper官网