vue-awesome-swiper是基于swiper的，安装不同版本的vue-awesome-swiper对应不同的swiper，所以swiper里面的属性多数能应用到vue-awesome-swiper中，也可以根据swiper文档来设置vue-awesome-swiper属性；swiper官方文档：https://www.swiper.com.cn/api/index2.html；在这里我使用的是，

1、安装

npm install  vue-awesome-swiper

cnpm inatall vue-awesome-swiper

2.引入

全局引入：

import vueSwiper from 'vue-awesome-swiper'

import 'swiper/dist/css/swiper.css'  //引入样式

组件方式引入：

import { swiper, swiperSlide } from "vue-awesome-swiper";

require("swiper/dist/css/swiper.css");

components: {

swiper,

swiperSlide

},

3.案例：

<template>

<div class="commodity">

<div class="container">

<swiper class='swiImgs' :options="swiperOption" v-if="commodity.length!=0">

<swiper-slide v-for="(item, index) in commodity" data-index="index" :key="index" class="item">

<img class='swiImg' :src='item' />

</swiper-slide>

<div class="swiper-scrollbar"></div> //滚动条

<div class="swiper-button-next"></div> //下一页

<div class="swiper-button-prev"></div> //上一页

 <div class="swiper-pagination" v-for="(item,index) in detailimages" :key="index" slot="pagination"></div> 

</swiper>

<span class='swiText' v-if='commodity'>{{imgIndex}}/{{commodity.length}}</span>

</div>

</div>

</template>

<script>

export default {

data() {

const that = this;

return {

commodity: [

"https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/911a7002e11608fb581fffcde05d5257.jpg"，

"https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/2_1536049430.jpg",

"https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/911a7002e11608fb581fffcde05d5257.jpg"，

https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/2_1536049430.jpg,

],这里就使用假数据了，

imgIndex: 1,

swiperOption: {

//是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true

notNextTick: true,

//循环

loop: true,

//设定初始化时slide的索引

initialSlide: 0,

//自动播放

autoplay: {

delay: 1500,

stopOnLastSlide: false,

disableOnInteraction: false

},

//滑动速度

speed: 800,

//滑动方向

direction: "horizontal",

//小手掌抓取滑动

grabCursor: true,

//滑动之后回调函数

on: {

slideChangeTransitionStart: function() {

that.imgIndex = this.realIndex + 1;  //获取轮播图片下标索引；这里有一个坑，之前网上找到的是用activeIndex，但后来网上说的是这个realIndex，原来activeIndex是swiper2.0的；而realIndex是swiper3.0的，（使用realIndex才实现了下标索引）

},

},

//分页器设置 

pagination: {

el: ".swiper-pagination",

clickable: true,

type: "bullets"

}

}

}

},

created() {

this.swiperOption.autoplay = this.commodity.length != 1 ? { //控制只有一张图片的时候不自动轮播

delay: 1500,

stopOnLastSlide: false,

disableOnInteraction: false

} : false;

},

methods: {

}

}

</script>

<style lang="less" rel="stylesheet/less">

.commodity{

background: #f5f5f5;

.container{

position: relative;

.swiText {

position: absolute;

height: 0.5rem;

width: 0.5rem;

bottom: 0.2rem;

right: 0.3rem;

font-size: 0.33rem;

color: #fff;

z-index: 10;

}

.swiImgs {

width: 100%;

.item{

height: 7.5rem;

.swiImg {

width: 100%;

}

}

}

}

}

</style>

4.参数说明：

个别属性声明：

autoplay: {

delay: 1500,

stopOnLastSlide: false, //当切换到最后一个slide时是否自动停止切换，false：不停止；true:停止

disableOnInteraction: false, //用户操作swiper之后，是否禁止autoplay。

reverseDirection: true, //开启反向自动轮播。

waitForTransition: true //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时。

},

fadeEffect: {

crossFade: false

},

cubeEffect: {

slideShadows: true, //开启slide阴影。默认 true。

shadow: true, //开启投影。默认 true。

shadowOffset: 100, //投影距离。默认 20，单位px。

shadowScale: 0.6 //投影缩放比例。默认0.94。

},

coverflowEffect: {

rotate: 30, //slide做3d旋转时Y轴的旋转角度。默认50。

stretch: 10, //每个slide之间的拉伸值，越大slide靠得越紧。 默认0。

depth: 60, //slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。

modifier: 2, //depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。

slideShadows: true //开启slide阴影。默认 true。

},

flipEffect: {

slideShadows: true, //slides的阴影。默认true。

limitRotation: true //限制最大旋转角度为180度，默认true。

},

zoom: {

maxRatio: 5, //最大倍数

minRatio: 2, //最小倍数

toggle: false, //不允许双击缩放，只允许手机端触摸缩放。

containerClass: "my-zoom-container" //zoom container 类名

},

navigation: {

nextEl: ".swiper-button-next", //前进按钮的css选择器或HTML元素。

prevEl: ".swiper-button-prev", //后退按钮的css选择器或HTML元素。

hideOnClick: true, //点击slide时显示/隐藏按钮

disabledClass: "my-button-disabled", //前进后退按钮不可用时的类名。

hiddenClass: "my-button-hidden" //按钮隐藏时的Class

},

pagination: {

el: ".swiper-pagination",

type: "bullets",

//type: 'fraction',

//type : 'progressbar',

//type : 'custom',

progressbarOpposite: true, //使进度条分页器与Swiper的direction参数相反

bulletElement: "li", //设定分页器指示器（小点）的HTML标签。

dynamicBullets: true, //动态分页器，当你的slide很多时，开启后，分页器小点的数量会部分隐藏。

dynamicMainBullets: 2, //动态分页器的主指示点的数量

hideOnClick: true, //默认分页器会一直显示。这个选项设置为true时点击Swiper会隐藏/显示分页器。

clickable: true //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。

},

scrollbar: {

el: ".swiper-scrollbar",

hide: true, //滚动条是否自动隐藏。默认：false，不会自动隐藏。

draggable: true, //该参数设置为true时允许拖动滚动条。

snapOnRelease: true, //如果设置为false，释放滚动条时slide不会自动贴合。

dragSize: 30 //设置滚动条指示的尺寸。默认'auto': 自动，或者设置num(px)。

},

// 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger

debugger: true,

//autoplay: 3000,

slidesPerView: "auto",//设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量。loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。

centeredSlides: true,//<span style="color:rgb(68,68,68);font-family:'microsoft yahei';font-size:13px;">设定为true时，活动块会居中，而不是默认状态下的居左。</span>

大概就是这些了，上面也有一个案例，有兴趣的可以去体验下；

注释：这里遇到了几个问题，这里跟大家说下：

1.当使用真实数据渲染的时候，分页器不显示，和滚动到最后一张停止：原因是因为this.commodity刚开始数据为[],后来赋值才有值，所以要先判断this.commodity是否为空

2.上面提到的获取轮播图片的下标索引，记得使用this.realIndex

3.当this.commodity只有一张图片时，他也会单图自动滚动轮播，这是需要判断