參考http://www.xiaoshu168.com/jquery/103.html
Swiper 初始化 支援下列中的參數
| Parameter(參數) |
Type(類型) |
Default Value(預設值 |
Example(例子) |
Description(說明) |
| speed |
number |
300 |
600 |
slides滑塊動畫之間的期間(單位ms) |
| eventTarget |
string |
‘wrapper’ |
‘container’ |
swipers事件對象,預設狀態下所有的觸控事件只能用於wrapper。如若需要其他元素包含在container內以及使用swipers,那麼可以使用’container’. 2.4.2版本新增 |
| autoplay |
number |
5000 |
- |
過渡延遲時間(單位ms),參數沒有指定的情況下,不生效,(補充:當使用者操作後autoplay失效) |
| autoplayDisableOninteraction |
boolean |
true |
false |
當設定為false時,使用者操作之後(swipes,arrow以及pagination 點擊)autoplay不會被禁掉,使用者操作之後每次都會重新啟動autoplay。 |
| autoplayStopOnLast |
boolean |
false |
true |
設定為false後autoplay在最後一個塊下失效(在沒有設定loop的情況下) |
| mode |
string |
‘horizontal’ |
‘vertical’ |
slides滑動方式,水平或垂直 |
| loop |
boolean |
false |
true |
true 為loop模式生效 |
| loopAdditionalSlides |
number |
0 |
2 |
loop模式下slides數量增加個數 |
| loopedSlides |
number |
1 |
2 |
在loop模式下使用slidesPerview:’auto’,還需使用該參數設定所要用到的loop個數 |
| slidesPerView |
number or ‘auto’ |
1 |
4 |
旋轉模式下,設定slider’s容器能夠同時顯示的slides數量。另外,支援’auto’值,會根據容器container的寬度調整slides數目。‘auto’不相容loop模式 |
| slidesPerViewFit |
boolean |
true |
false |
僅當已設定了slidesPerView:’auto’,以及當slides的寬度大於容器,該參數生效。預設為true然後寬度大的slide 過渡時會劃分為邊緣的兩部分。為false時,slide transition 會劃分為比容器container大的多個slides |
| slidesPerGroup |
number |
1 |
2 |
定義slides的數量多少為一組,在旋轉模式下有效。(carousel mode) |
| calculateHeight |
boolean |
false |
true |
當值為true時,Swiper根據slides內容計算容器高度。響應式布局中或不知道slides高度時十分有用(就像響應式的圖片) |
| roundLengths |
boolean |
false |
true |
值為true時,Swiper會四捨五入寬度和高度,在響應式的滑塊中包含誤差時十分有用。 |
| cssWidthAndHeight |
boolean |
false |
true |
值為true以及Swiper中的container,wrapper和slides沒有高度 |
| updateFormElements |
boolean |
true |
false |
當所有的內嵌映像(img標籤)載入完成後Swiper會重新初始化。 |
| watchActiveIndex |
boolean |
false |
true |
如果啟用觸屏事件期間會重新動態計算活動塊的索引。 |
| visiblilityFullfit |
boolean |
false |
true |
如果啟用,僅有“可視”的slides會最後適應容器的大小 |
| autoResize |
boolean |
true |
false |
值為false時,視窗尺寸改變時,禁掉slides自適應 |
| DOManimation |
boolean |
true |
false |
在不支援css transitions(IE7-9)的瀏覽器上是否使用自訂的DOM動畫 |
| resistance |
boolean or “100%” |
true |
false |
值為false時禁用resistant bounds(抵抗反彈),設定為‘100%’時啟用resistant(抵抗)模式 |
| noSwiping |
boolean |
false |
true |
值為true時,當swiper新增類”noSwipingClass“的滑動塊時,禁掉該元素的滑動。 |
| preventLinks |
boolean |
true |
false |
啟用時當碰觸滑塊(slides)時禁止<a>標籤連結 |
| preventLinksPropagation |
boolean |
false |
true |
如滑動過程中需要跟preventLinks一起禁用stopPropagation,設定值為true |
| initialSlide |
number |
2 |
0 |
初始塊(頁面)的索引 |
| useCSS3Transforms |
boolean |
true |
false |
值為false時禁用css3 transforms(減少記憶體,提高效能,同時也降低了美觀),同時使用wrapper的left/top屬性代替。 |
自由模式與滑塊容器(Free Mode and Scroll Container)
| Parameter(參數) |
Type(類型) |
Default Value(預設值 |
Example(例子) |
Description(說明 |
| freeMode |
boolean |
false |
true |
若為真slide座標不固定 |
| freeModeFluid |
boolean |
false |
true |
若為真,釋放滑塊之後仍會滑動一小會 |
| scrollContainer |
boolean |
false |
true |
設定為真時,讓Swiper看上去像滑動區(scrollable area) |
| momentumRatio |
number |
1 |
2 |
設定的值越大,當釋放滑塊時的動量距離越大 |
| momentumBounce |
boolean |
true |
false |
false時禁用自由模式下的(free mode)動量彈性 |
| momentumBounceRatio |
number |
1 |
2 |
值越大產生的動量彈性(momentum bounce)效果越明顯 |
塊(slides)位移
| Parameter(參數) |
Type(類型) |
Default Value(預設值 |
Example(例子) |
Description(說明 |
| centeredSlides |
boolean |
false |
true |
若為真,那麼活動塊會置中,而非預設狀態下的居左 |
| offsetPxBefore |
number |
0 |
100 |
指定slides與wrapper左邊框的位移量 |
| offsetPxAfter |
number |
0 |
100 |
指定slides與wrapper右邊框的位移量 |
| offsetSlidesBefore |
number |
0 |
2 |
滑塊slides與wrapper左邊框的位移量等於等於指定滑塊slides個數的寬度。這在響應式布局中而你又不知道slides寬度時,將十分有用。 |
| offsetSlidesAfter |
number |
0 |
2 |
滑塊slides與wrapper右邊框的位移量等於等於指定滑塊slides個數的寬度。這在響應式布局中而你又不知道slides寬度時,將十分有用。 |
觸屏/滑鼠事件效應(Touch/mouse interactions )
| Parameter(參數) |
Type(類型) |
Default Value(預設值 |
Example(例子) |
Description(說明 |
| touchRatio |
number |
1 |
0.8 |
觸屏比率 |
| simulateTouch |
boolean |
true |
false |
true,Swiper接受滑鼠事件時與觸屏事件相似。(單擊以及拖曳滑塊) |
| onlyExternal |
boolean |