一、安裝

npm install vue-awesome-swiper

二、在main.js中引入swiper.css

import "swiper/dist/css/swiper.css"

三、在需要的頁面引入vue-awesome-swiper并注冊

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

其中：

1.swiper:充當要要滾動的外層div

2.swiperSlide：充當每個要輪播的項

四、注冊組件

components:{

? ? ?swiper,

? ? ?swiperSlide

}

五、具體樣式

詳見GitHub（搜索vue-awesome-swiper）

例如：

swiper參數進行配置

1、在.vue組件中的data() {}中進行配置，添加

data() {

? ? ?return {

? ? ? ? ? setOption:{

? ? ? ? ? ? ? ?pagination:".swiper-pagination",

? ? ? ? ? ? ? ?autoplay:3000,

? ? ? ? ? ? ? ?nextButton: '.swiper-button-next',

? ? ? ? ? ? ? ?prevButton: '.swiper-button-prev',

? ? ? ? ? ? ? ?loop:true

? ? ? ? ? ? ? ?//需要用哪個配置哪個

? ? ? ? ? }

? ? ?}

}

2、將setOption添加到swiper指令中

<swiper :options='setOption' class='swiper-box'>

? ? ?<swiper-slide></swiper-slide>

? ? ?<swiper-slide></swiper-slide>

? ? ?<swiper-slide></swiper-slide>

? ? ?<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>

</swiper>