swiper3.0是側(cè)重于移動端扒秸，pc端也能用盐捷，如果側(cè)重于pc端孽江，可以用swiper2.0.
這次我是vue.js +vue-awesome-swiper,用法和swiper類似。
1宣鄙、安裝 vue-awesome-swiper
npm install vue-awesome-swiper --save-dev
(這里需要注意一個問題袍镀，因為我開始安裝的是最新版的，但是出現(xiàn)內(nèi)容在一個頁面的情況冻晤，只需要降一個版本就可以了 "vue-awesome-swiper": "2.5.4", 關鍵苇羡，很重要)
2. XXX.vue（vue組件）下面使用：
<template>
<div>
<swiper :options="swiperOption" ref="mySwiperA">
<!-- 幻燈內(nèi)容 -->
<swiper-slide>slide1</swiper-slide> //這里可以用 v-for循環(huán)圖片
<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, //我現(xiàn)在還沒有搞清楚這個東西度帮，反正加上就是了
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>