Swiper 學習心得

   swiper的結構爲：

參數解析

1.direction：滑動方向 默認爲horizontal（水平），能夠設置爲vertical（垂直，但在某些瀏覽器很差使）。

2.speed：從滑動開始到滑動結束的時間，注意autoplay指的是間隔多久開始滑動。

3.autoplay：若是用戶操做後autoplay中止，參考基本選項  autoplayDisableOnInteraction 。

4.autoplayDisableOnInteraction:用戶操做swiper以後，是否禁止 autoplay。默認爲true：中止。

5.grabCursor：設置爲true時，鼠標覆蓋Swiper時指針會變成手掌形狀，拖動時指針會變成抓手形狀。（根據瀏覽器形狀有所不一樣）。

6.parallax：滑動與其父元素之間的移動距離的關係。

7.ally：加提示信息。

8.width、height：會使自適應失效。

 

freeMode：（freemode/反彈模式）

1.freeMode：滑動不會按照塊滑，根據滑動的力度而改變位置。

2.freeModeMomentum：會出現相似卡了的效果。

3.freeModeMomentumRatio：free模式動量值（移動慣量）。設置的值越大，當釋放slide時的滑動距離越大。

 

Slides grid（網格分佈）

用於設定slider塊居中（centeredSlides），或者幾塊爲一組（slidesPerGroup），各個Slide之間的距離（spaceBetween），多行佈局裏的Slide的數量（slidesPerColumn），多行佈局以什麼形式填充（slidesPerColumnFill）

 

Effects（切換效果）

effect：slide的切換效果，能夠設置爲fade（淡入），cube（方塊），coverflow（3d流）

 

Clicks（點擊）

swiping時點擊出現各類阻止狀況

 

Touches(觸發swip的條件)

1.touchRatio 觸摸距離與實際滑動的關係。

2.onlyExternal：值爲true時，slide沒法拖動，只能使用擴展API函數例如 slideNext() 或 slidePrev()或 slideTo()等改變slides滑動。

3.followFinger：如設置爲false，拖動slide時它不會動，當你釋放時slide纔會切換。

4.設置爲false時，進行快速短距離的拖動沒法觸發Swiper。

5.threshold:拖動的臨界值（單位爲px），若是觸摸距離小於該值滑塊不會被拖動。

 

...

 

Swiping/No swiping（禁止切換）

能夠設置禁止滑動到下一個（前一個），或者設定滑動的區域。

 

* pagination 分頁器

paginationClickable、 paginationBulletRender（設置索引）、paginationHide

 

* Navigation Buttons(前進後退按鈕)

nextButtom  PrevButtom

 

* Scollbar（滾動條）

scrollbarHide

 

keyboard/mousewheel(鼠標、鍵盤控制選項)

 

Callbacks（回調函數）