1.首先安装vue-awesome-swiper插件
npm install vue-awesome-swiper --save
2.在根目录plugs新建vue-swiper.js，写入以下内容
import Vuefrom 'vue'
import VueAwesomeSwiperfrom 'vue-awesome-swiper/dist/ssr'
Vue.use(VueAwesomeSwiper)
3.在nuxt.config.js中引用vue-swiper.js以及swiper的css样式
css: [
'swiper/dist/css/swiper.css'
],
plugins: [
{src:'@/plugins/vue-swiper', ssr:false },
],
4.在需要使用轮播图的组件中写入以下内容，官方API文档，最新版本看swiper4的API
html部分
<template xmlns:v-swiper="轮播图">
<div v-swiper:mySwiper="swiperOption" class="index-swiper-box">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src='../assets/images/ad/1.jpg' alt="轮播图" class="index-carousel-image">
<div class="swiper-slide"><img src='../assets/images/ad/2.jpg' alt="轮播图" class="index-carousel-image">
<div class="swiper-slide"><img src='../assets/images/ad/3.jpg' alt="轮播图" class="index-carousel-image">
<div class="swiper-slide"><img src='../assets/images/ad/4.jpg' alt="轮播图" class="index-carousel-image">
<div class="swiper-pagination swiper-pagination-bullets">
</div>
</template>
js部分
data(){
return{
swiperOption: {
loop:false, //环路，是否可以从最后一张切到第一张
grabCursor :true, //放到图片上显示为小手
autoHeight:true, //高度随内容变化
setWrapperSize :true, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
roundLengths :true, //设定为true将slide的宽和高取整(四舍五入)以防止某些分辨率的屏幕上文字或边界(border)模糊。
// centeredSlides: true, 设定为true时，active slide会居中，而不是默认状态下的居左。
preloadImages:false, //默认为true，Swiper会强制加载所有图片。
// spaceBetween: 20, 在slide之间设置距离（单位px）
pagination: {
el:'.swiper-pagination',
type:'bullets' //分液器的样式
},
on: {
slideChange() {
// console.log('onSlideChangeEnd', this); 滑动的回调事件
},
tap() {
// console.log('onTap', this); 回调函数，当你轻触(tap)Swiper后执行。在移动端，click会有 200~300 ms延迟，所以请用tap代替click作为点击事件。接受touchend事件作为参数
},
/* slideChangeTransitionStart:function(){
alert('初始化时触发了一次回调');
} 初始化时候的回调函数,*/
}
}
}
},
css部分
.index-swiper-box{
max-width: 600px; //最大宽度600px
border-radius: 8px; //圆角矩形，大小8px
margin: 0 auto 30px auto; //居中显示，下边距30px
}
.swiper-wrapper{
max-width: 600px; //最大宽度600px
height: auto; //高度自适应
overflow: hidden; //多余内容隐藏
}
.index-carousel-image{
width:100%; //宽度百分百
height:auto; //高度自适应
max-width:600px; //最大宽度600px
display: block; //显示方式块级元素
border-radius: 8px; //圆角矩形边框，大小为8px
margin: 0 auto; //居中显示
}
