swiper3.0是侧重于移动端，pc端也能用，如果侧重于pc端，可以用swiper2.0.
这次我是vue.js +vue-awesome-swiper,用法和swiper类似。
1、安装 vue-awesome-swiper
npm install vue-awesome-swiper --save-dev
(这里需要注意一个问题，因为我开始安装的是最新版的，但是出现内容在一个页面的情况，只需要降一个版本就可以了 "vue-awesome-swiper": "2.5.4", 关键，很重要)
2. XXX.vue（vue组件）下面使用：
<template>
<div>
<swiper :options="swiperOption" ref="mySwiperA">
<!-- 幻灯内容 -->
<swiper-slide>slide1</swiper-slide> //这里可以用 v-for循环图片
<swiper-slide>slide2</swiper-slide>
<!-- 以下控件元素是可选的，需要在这里声明，并且在下面data配置 -->
<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> //右箭头
<div class="swiper-scrollbar" slot="scrollbar"></div> //滚动条
</swiper>
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper' //导入组件
export default{
components: {
swiper, //定义组件
swiperSlide
},
data(){
return {
swiperOption: {
// 所有配置均为可选（同Swiper配置）
// notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
notNextTick: true, //我现在还没有搞清楚这个东西，反正加上就是了
autoplay: 3000,
grabCursor : true,
setWrapperSize :true,
autoHeight: true,
pagination : '.swiper-pagination',
paginationClickable :true,
prevButton:'.swiper-button-prev',
nextButton:'.swiper-button-next',
scrollbar:'.swiper-scrollbar',
mousewheelControl : true,
observeParents:true,
onTransitionStart(swiper){
console.log(swiper)
}
}
}
},
computed: {
// 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
swiper() {
return this.$refs.mySwiperA.swiper
}
},
mounted() {
//这里应该是一些事件，等接下来再研究，这里不是必须的
this.swiper.slideTo(3, 1000, false)
}
}
</script>