vue-awesome-swiper的使用以及API整理

1、先說一個看關於vue-awesome-swiper的一個坑

       vue項目的package.json中顯示的"vue-awesome-swiper": "^2.5.4"，用npm install自動安裝依賴時裝的版本爲"version": "2.6.7"
       2.5.4與2.6.7都是基於swiper3的，從官網上swiper3的教程來看並不須要單獨引入樣式文件，而2.6.7版本須要單獨引入swiper/dist/css目錄下的swiper.css樣式文件（相似於swiper4）。

       而且2.6.7版本swiper位於node_modules/vue-awesome-swiper/node_modules下；2.5.4不須要單獨引入樣式文件，而且swiper直接位於node_modules文件夾下。

2、基本使用方法

1.安裝（略）

2.引用

/*全局引入*/
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.css'//這裏注意具體看使用的版本是否須要引入樣式，以及具體位置。
    Vue.use(VueAwesomeSwiper, /* { default global options } */)

/*組件方式引用*/
    import 'swiper/dist/css/swiper.css'////這裏注意具體看使用的版本是否須要引入樣式，以及具體位置。
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
    components: {
      swiper,
      swiperSlide
    }

3.使用

就是通常組件的用法

<swiper :options="swiperOption">
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
    </swiper>
    <!--如下看須要添加-->
    <div class="swiper-scrollbar"></div> //滾動條
    <div class="swiper-button-next"></div> //下一項
    <div class="swiper-button-prev"></div> //上一項
    <div class="swiper-pagination"></div> //標頁碼

data(){
    return{
      swiperOption: {//swiper3
      autoplay: 3000,
      speed: 1000,
      }
    }
  }

3、配置

參數	類型（swiper3）	默認值（swiper3）	類型（swiper4）	默認值（swiper4）	說明
autoplay	Number/Boolean	0/false	Object	autoplay	自動切換
speed	Number	300	Number	300	切換速度
loop	Boolean	false	Boolean	false	loop模式
loopAdditionalSlides	Number	0	Number	0	loop模式下會在slides先後複製若干個slide,，先後複製的個數不會大於原總個數。
loopedSlides	Number	1	Number	1	在loop模式下使用slidesPerview:'auto',還需使用該參數設置所要用到的loop個數。
direction	String	horizontal	String	horizontal	Slides的滑動方向
autoplayDisableOnInteraction	Boolean	true	-	-	用戶操做swiper以後，是否禁止autoplay
autoplayStopOnLast	Boolean	true	-	-	切換到最後一個slide時中止自動切換
grabCursor	Boolean	false	Boolean	false	鼠標覆蓋Swiper時指針會變成手掌形狀，拖動時指針會變成抓手形狀
width	Number	-	Number	-	強制Swiper的寬度
height	Number	-	Number	-	強制Swiper的高度
autoHeight	Boolean	false	Boolean	false	自動高度
freeMode:					swiper3/4 api相同
freeMode	Boolean	false	-	-	free模式，slide會根據慣性滑動且不會貼合
freeModeMomentum	Boolean	true	-	-	free模式動量。若設置爲false則關閉動量，釋放slide以後當即中止不會滑動。
freeModeMomentumRatio	Number	1	-	-	free模式動量值（移動慣量）
freeModeMomentumVelocityRatio	Number	1	-	-	動量反彈
freeModeMomentumBounce	Boolean	true	-	-	Slides的滑動方向
freeModeMomentumBounceRatio	Number	1	-	-	值越大產生的邊界反彈效果越明顯，反彈距離越大。
freeModeSticky	Boolean	false	-	-	使得freeMode也能自動貼合。
effect:					swiper3/4 api相同
effect	String	slide	-	-	slide的切換效果。
fade/fadeEffect(4)	Object	fade	-	-	fade效果參數。
cube/cubeEffect	Object	cube	-	-	cube效果參數。
coverflow/coverflowEffect	Object	coverflow	-	-	coverflow效果參數。
flip/flipEffect	Object	flip	-	-	flip效果參數。
Zoom:
zoom	Boolean	false	Object	zoom	焦距功能：雙擊slide會放大，而且在手機端可雙指觸摸縮放。
zoomMax	Number	3	-	-	最大縮放焦距（放大倍率）.
zoomMin	Number	1	-	-	最小縮放焦距（縮小倍率）。
zoomToggle	Boolean	true	-	-	設置爲false，不容許雙擊縮放，只容許手機端觸摸縮放。
pagination:
pagination	String	-	Object	pagination	分頁器容器的css選擇器或HTML標籤
paginationType	String	-	-	-	bullets’ 圓點（默認）‘fraction’ 分式 ‘progress’ 進度條‘custom’ 自定義
paginationClickable	Boolean	false	-	-	點擊分頁器的指示點分頁器控制Swiper切換
paginationHide	Boolean	false	-	-	默認分頁器會一直顯示
paginationElement	String	span	-	-	設定分頁器指示器（小點）的HTML標籤。
Navigation Buttons:				swiper4 navigation
nextButton	string / HTMLElement	-	-	-	前進按鈕的css選擇器或HTML元素。
prevtButton	string / HTMLElement	-	-	-	後退按鈕的css選擇器或HTML元素。
Scrollbar:
scrollbar	string / HTMLElement	-	Object	swiper4 Scrollbar	Scrollbar容器的css選擇器或HTML元素
scrollbarHide	Bolean	true	-	-	滾動條是否自動隱藏。
scrollbarDraggable	Boolean	false	-	-	該參數設置爲true時容許拖動滾動條。
scrollbarSnapOnRelease	Boolean	false	-	-	若是設置爲true，釋放滾動條時slide自動貼合。

autoplay:

autoplay: {
    delay: 3000, //自動切換的時間間隔，單位ms
    stopOnLastSlide: false, //當切換到最後一個slide時中止自動切換
    stopOnLastSlide: true, //若是設置爲true，當切換到最後一個slide時中止自動切換。
    disableOnInteraction: true, //用戶操做swiper以後，是否禁止autoplay。
    reverseDirection: true, //開啓反向自動輪播。
    waitForTransition: true, //等待過渡完畢。自動切換會在slide過渡完畢後纔開始計時。
  },

fade:

fadeEffect: {
    crossFade: false,
  }

cube:

cubeEffect: {
    slideShadows: true, //開啓slide陰影。默認 true。
    shadow: true, //開啓投影。默認 true。
    shadowOffset: 100, //投影距離。默認 20，單位px。
    shadowScale: 0.6 //投影縮放比例。默認0.94。
  },

coverflow:

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。
  },

flip:

flipEffect: {
    slideShadows : true, //slides的陰影。默認true。
    limitRotation : true, //限制最大旋轉角度爲180度，默認true。
  }

zoom:

zoom: {
     maxRatio: 5, //最大倍數
     minRatio: 2, //最小倍數
     toggle: false, //不容許雙擊縮放，只容許手機端觸摸縮放。
     containerClass: 'my-zoom-container', //zoom container 類名
   },

navigation:

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:

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:

scrollbar: {
     el: '.swiper-scrollbar',
     hide: true, //滾動條是否自動隱藏。默認：false，不會自動隱藏。
     draggable: true, //該參數設置爲true時容許拖動滾動條。
     snapOnRelease: true, //若是設置爲false，釋放滾動條時slide不會自動貼合。
     dragSize: 30, //設置滾動條指示的尺寸。默認'auto': 自動，或者設置num(px)。
   },