一、先說一個看關于vue-awesome-swiper的一個坑
vue項目的package.json中顯示的"vue-awesome-swiper": "^2.5.4"，用npm install自動安裝依賴時裝的版本為"version": "2.6.7"，而單獨安裝（npm install vue-awesome-swiper@2.5.4）的則是正常的"version": "2.5.4"。
???????這兩個版本都是基于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文件夾下。
二、基本使用方法
1.安裝（略）
2.引用
/*全局引入*/importVueAwesomeSwiperfrom'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'exportdefault{components: {? ? ? swiper,? ? ? swiperSlide? ? }
3.使用
就是一般組件的用法
<!--以下看需要添加-->//滾動條//下一項//上一項//標頁碼
data(){return{swiperOption: {//swiper3autoplay:3000,speed:1000,? ? ? }? ? }? }
三、配置
參數類型（swiper3）默認值（swiper3）類型（swiper4）默認值（swiper4）說明
autoplayNumber/Boolean0/falseObjectautoplay自動切換
speedNumber300Number300切換速度
loopBooleanfalseBooleanfalseloop模式
loopAdditionalSlidesNumber0Number0loop模式下會在slides前后復制若干個slide,，前后復制的個數不會大于原總個數。
loopedSlidesNumber1Number1在loop模式下使用slidesPerview:'auto',還需使用該參數設置所要用到的loop個數。
directionStringhorizontalStringhorizontalSlides的滑動方向
autoplayDisableOnInteractionBooleantrue--用戶操作swiper之后，是否禁止autoplay
autoplayStopOnLastBooleantrue--切換到最后一個slide時停止自動切換
grabCursorBooleanfalseBooleanfalse鼠標覆蓋Swiper時指針會變成手掌形狀，拖動時指針會變成抓手形狀
widthNumber-Number-強制Swiper的寬度
heightNumber-Number-強制Swiper的高度
autoHeightBooleanfalseBooleanfalse自動高度
freeMode:swiper3/4 api相同
freeModeBooleanfalse--free模式，slide會根據慣性滑動且不會貼合
freeModeMomentumBooleantrue--free模式動量。若設置為false則關閉動量，釋放slide之后立即停止不會滑動。
freeModeMomentumRatioNumber1--free模式動量值（移動慣量）
freeModeMomentumVelocityRatioNumber1--動量反彈
freeModeMomentumBounceBooleantrue--Slides的滑動方向
freeModeMomentumBounceRatioNumber1--值越大產生的邊界反彈效果越明顯，反彈距離越大。
freeModeStickyBooleanfalse--使得freeMode也能自動貼合。
effect:swiper3/4 api相同
effectStringslide--slide的切換效果。
fade/fadeEffect(4)Objectfade--fade效果參數。
cube/cubeEffectObjectcube--cube效果參數。
coverflow/coverflowEffectObjectcoverflow--coverflow效果參數。
flip/flipEffectObjectflip--flip效果參數。
Zoom:
zoomBooleanfalseObjectzoom焦距功能：雙擊slide會放大，并且在手機端可雙指觸摸縮放。
zoomMaxNumber3--最大縮放焦距（放大倍率）.
zoomMinNumber1--最小縮放焦距（縮小倍率）。
zoomToggleBooleantrue--設置為false，不允許雙擊縮放，只允許手機端觸摸縮放。
pagination:
paginationString-Objectpagination分頁器容器的css選擇器或HTML標簽
paginationTypeString---bullets’ 圓點（默認）‘fraction’ 分式 ‘progress’ 進度條‘custom’ 自定義
paginationClickableBooleanfalse--點擊分頁器的指示點分頁器控制Swiper切換
paginationHideBooleanfalse--默認分頁器會一直顯示
paginationElementStringspan--設定分頁器指示器（小點）的HTML標簽。
Navigation Buttons:swiper4 navigation
nextButtonstring / HTMLElement---前進按鈕的css選擇器或HTML元素。
prevtButtonstring / HTMLElement---后退按鈕的css選擇器或HTML元素。
Scrollbar:
scrollbarstring / HTMLElement-Objectswiper4 ScrollbarScrollbar容器的css選擇器或HTML元素
scrollbarHideBoleantrue--滾動條是否自動隱藏。
scrollbarDraggableBooleanfalse--該參數設置為true時允許拖動滾動條。
scrollbarSnapOnReleaseBooleanfalse--如果設置為true，釋放滾動條時slide自動貼合。
autoplay: {delay:3000,//自動切換的時間間隔，單位msstopOnLastSlide:false,//當切換到最后一個slide時停止自動切換stopOnLastSlide:true,//如果設置為true，當切換到最后一個slide時停止自動切換。disableOnInteraction:true,//用戶操作swiper之后，是否禁止autoplay。reverseDirection:true,//開啟反向自動輪播。waitForTransition:true,//等待過渡完畢。自動切換會在slide過渡完畢后才開始計時。},
fadeEffect: {crossFade:false,? }
cubeEffect: {slideShadows:true,//開啟slide陰影。默認 true。shadow:true,//開啟投影。默認 true。shadowOffset:100,//投影距離。默認 20，單位px。shadowScale:0.6//投影縮放比例。默認0.94。},
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。},
flipEffect: {slideShadows:true,//slides的陰影。默認true。limitRotation :true,//限制最大旋轉角度為180度，默認true。}
zoom: {maxRatio:5,//最大倍數minRatio:2,//最小倍數toggle:false,//不允許雙擊縮放，只允許手機端觸摸縮放。containerClass:'my-zoom-container',//zoom container 類名},
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: {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: {el:'.swiper-scrollbar',hide:true,//滾動條是否自動隱藏。默認：false，不會自動隱藏。draggable:true,//該參數設置為true時允許拖動滾動條。snapOnRelease:true,//如果設置為false，釋放滾動條時slide不會自動貼合。dragSize:30,//設置滾動條指示的尺寸。默認'auto': 自動，或者設置num(px)。},
