Swiper 參數說明

來源:互聯網
上載者:User

參考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

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.