第一步 :? cnpm i vue-awesome-swiper --save (已經安裝淘寶鏡像 / 否則用 npm)

?

第二部:? 在main.js 中 導入:

　　　　`import VueAwesomeSwiper from "vue-awesome-swiper ",`

　　　　導入:

　　　　swiper的樣式

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

　　　　使用:

　　　　Vue.use(VueAwesomeSwiper)

?

第三部:? 在相應的組件中使用:

　　HTML部分:

```

　　<template>
??????? <swiper :options="swiperOption" ref="mySwiper">
????????? <swiper-slide>slide 1 </swiper-slide>
????????? <swiper-slide>slide 2</swiper-slide>
??????? </swiper>
????? </template>

```

　　script部分:

```
　　?swiperOption: {
????????? notNextTick: true,? // 必須為true,保證的vue-awsome-swiper先加載
????????? loop: true,???????? //循環
????????? slidesPerView: 2,?? //每頁 的頁數
????????? speed: 400,???????? //輪播速度
????????? autoplay: true,???? //自動輪播 ?
????????? grabCursor: true,?? //鼠標懸浮小手形狀 ?
??????? },

```

完成以上操作之后輪播就會自動跑起來.swiperOption中的設置基本和swiper官網設置相同.

[swiper官網](http://3.swiper.com.cn/api/index.html)

?

轉載于:https://www.cnblogs.com/niluiquhz/p/9041875.html

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的vue-awesome-swiper 的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。