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)。javascript

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

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.使用

就是通常組件的用法html

<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:vue

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

fade:java

fadeEffect: {
    crossFade: false, } 

cube:node

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

coverflow:npm

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:json

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

zoom:segmentfault

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

navigation:api

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)。 },
相關文章
相關標籤/搜索