一、swiper初始化中使用的parameters
1.initialSlide——用來設(shè)定頁面加載完成時家卖,第幾張圖片先顯示出來
取值-整數(shù)
默認-0
0表示第1張 1表示第2張 2表示第3張 眨层。。上荡。以此類推
2.direction——設(shè)置slide的滑動方向
horizontal 水平 默認
vertical 垂直
3.speed——滑動速度趴樱,即slide滑動開始到結(jié)束所用的時間(從左到右所用的時間)
取值舉例:500 單位為 ms
4.autoplay——自動切換的時間間隔,不設(shè)定該參數(shù)酪捡,slide不會自動切換
取值舉例:2000 單位 ms
5.autoplayDisableOnInteraction——用戶操作swiper之后是否禁止autoplay
ture 停止 默認
false 不會停止叁征,但是會重新啟動autoplay
6.autoplay
如果設(shè)置為ture,當切換到最后一個slide時停止自動切換(loop模式下無效)
false 繼續(xù)切換 默認值
7.grabCursor
ture 鼠標覆蓋Swriper時指針會變成手掌狀逛薇,拖動時指針會變成抓手形狀(根據(jù)瀏覽器有所不同)
false 默認值
8.autoHeight——自動高度
ture wrapper和container會隨著當前slider的高度而發(fā)生變化
false 默認值
9.nested
用于嵌套相同方向的swiper時捺疼,當切換到子swiper時停止父swiper的切換。
請將子swiper的nested設(shè)置為ture
由于需要在slideChangeEnd時判斷作用塊永罚,因此快速滑動時這個選項無效
二啤呼、free Mode(free模式/抵抗反彈)
1.freeMode
false 普通模式:slide滑動時只滑動一格,并自動貼合wrapper
ture free模式:slide會根據(jù)慣性滑動且不會自動貼合
2.freeModeMomentum——free模式動量
false 關(guān)閉動量呢袱,釋放slide之后立即停止不會滑動
ture 默認值
3.freeModeMomentumRatio——free模式動量值(移動慣量)
值為number類型官扣,當設(shè)置的值越大,釋放slide時滑動的距離越大羞福。
4.freeModeMomentumBounce——動量反彈惕蹄。
false 禁用free模式下的動量反彈,slide通過慣性滑動到邊緣時治专,無反彈效果
ture 默認值卖陵,有反彈效果
5.freeModeMomentumBounceRatio——動量反彈的動量值
值越大,產(chǎn)生的邊界反彈效果越明顯张峰,反彈距離越大泪蔫。
6.freeModeSticky
ture 使得freeMode也能自動貼合
false 默認值
三、slides grid(網(wǎng)格分布)
1.centeredSlides
ture 活動快居中
false 活動塊居左挟炬,默認值
2.slidesPreView
設(shè)置slider容器能夠同時顯示的slides數(shù)量(carousel模式)
可以設(shè)置為number或者 auto
auto —— 根據(jù)slides的寬度來設(shè)定數(shù)量
loop模式下鸥滨,如果設(shè)置為auto,還需設(shè)置另外一個參數(shù) loopedSlides
3.slidesPerGroup
在carousel mode下定義slides的數(shù)量多少為一組谤祖。
4.slideBetween
設(shè)置slide之間的距離(單位 px)
5.slidesPerColumn
多行布局里面沒列的slide數(shù)量
6.slidesPerColumnFill
多行布局中以什么形式填充:
'column'(列)
1 3 5
2 4 6
'row'(行)
1 2 3
4 5 6
7.slidesOffsetBefore
設(shè)置slide與左邊框預設(shè)偏移量(單位 px)
類型 number 舉例: 100
8.slidesOffsetAfter
設(shè)置slide與右邊框的預設(shè)偏移量(單位 px)
四婿滓、Effects(切換效果)
1.effect——slide的切換效果
"slide"——位移切換(默認)
"fade"——淡入
"cube"——方塊
"coverflow"——3d流
"flip"——3d翻轉(zhuǎn)
2.fade——fade效果參數(shù)≈嘞玻可選參數(shù):crossFade(3.03啟用)
false(默認)——關(guān)閉淡出凸主。過渡時,源slide透明度為1(不淡出)额湘,過度中的slide透明度從0->1(淡入)卿吐,其他slide透明度為0。
ture(可選值)——開啟淡出锋华。過渡時嗡官,源slide透明度從1->0(淡出),過渡中的slide透明度從0->1(淡入)毯焕,其他slide透明度為0衍腥。
舉例:
effect:'fade',
fade:{
crossFade:false
}
3.cube——效果參數(shù),可選值:
slideShadows——開啟slide陰影纳猫。默認ture婆咸。
shadow——開啟投影。默認ture芜辕。
shadowOffset——投影距離尚骄。默認20,單位px侵续。
shadowScale投影縮放比例倔丈。默認0.94
舉例:
effect : 'cube',
cube: {
slideShadows: true,
shadow: true,
shadowOffset: 100,
shadowScale: 0.6
}
4.coverflow——cover flow是類似于蘋果將多首歌曲的封面以3D界面的形式顯示出來的方式。coverflow效果參數(shù)询兴,可選值:
rotate:slide做3d旋轉(zhuǎn)時Y軸的旋轉(zhuǎn)角度乃沙。默認50。
stretch:每個slide之間的拉伸值诗舰,越大slide靠得越緊警儒。 默認0。
depth:slide的位置深度眶根。值越大z軸距離越遠蜀铲,看起來越小。 默認100属百。
modifier:depth和rotate和stretch的倍率记劝,相當于depth*modifier、rotate*modifier族扰、stretch*modifier厌丑,值越大這三個參數(shù)的效果越明顯定欧。默認1。
slideShadows:開啟slide陰影怒竿。默認 true砍鸠。
5.flip——共有兩個參數(shù)可設(shè)置:
slideShadows:slides的陰影。默認true耕驰。
limitRotation:限制最大旋轉(zhuǎn)角度為180度爷辱,默認true。
五朦肘、Clicks(點擊)
1.preventClicks
true(默認)——當swiping時組織意外的鏈接點擊饭弓。
false
2.preventClicksPropagation——阻止click冒泡,拖動Swiper時組織click事件媒抠。
true(默認) false
3.slideToClickedSlide
true——swiping時點擊slide會過度到這個slide
false(默認)
六弟断、Touches(觸發(fā)條件)
1.touchRatio——觸摸距離與slide滑動距離的比率
類型:number 默認:1 舉例:0.5
應用實例:利用tuchRatio制作與拖動方向相反的swiper——通過負數(shù)
2.simulateTouch
true(默認)——swiper接受鼠標點擊、拖動趴生。
false
3.onlyExternal
true——slide無法拖動夫嗓,只能使用擴展API函數(shù),例如slideNext()或slidePrev()或slideTo()等改變slides滑動
false(默認)
4.followFinger
true(默認)
false——拖動slide時它不會動冲秽,當釋放slide才會切換
5.shortSwopes
true(默認)
false——驚醒快速短距離的拖動無法觸發(fā)swiper
6.longSwipesRatio——進行l(wèi)ongSwipes時觸發(fā)swiper所需要的最小拖動距離比例舍咖,即定義longSwipes距離比例。值越大swiper所需距離越大锉桑。最大值0.5
7.threshold——拖動的臨界值(單位為px)排霉,如果觸摸距離小于該值滑塊不會被拖動。
8.touchAngle——允許觸發(fā)拖動的角度值民轴。默認45度攻柠,即使觸摸方向不是完全水平也能拖動slide。
9.longSwipes
true(默認)
false——進行長時間長距離的拖動無法觸發(fā)Swiper后裸。
10.longSwipesMs——定義longSwipes的時間(單位ms)瑰钮,超過則屬于longSwipes。
11.touchMoveStopPropagation
true(默認)——阻止touchmove冒泡事件微驶。
false
12.resistance——邊緣抵抗浪谴。當swiper已經(jīng)處于第一個或最后一個slide時,繼續(xù)拖動Swiper會離開邊界因苹,釋放后彈回苟耻。邊緣抵抗就是拖離邊界時的抵抗力。
false——禁用扶檐,將slide拖離邊緣時完全沒有抗力凶杖。
true(默認),將slide脫離邊緣時有抗力款筑,可以通過resistanceRatio設(shè)定抵抗力大小智蝠。
13.resistanceRatio——抵抗率腾么。邊緣抵抗力的大小比例。值越小抵抗越大越難將slide拖離邊緣杈湾,0時完全無法拖離哮翘。
默認0.85
舉例:0.7 0.9 0
14.iOSEdgeSwipeDetection
true——開啟IOS的UIWebView環(huán)境下的邊緣探測。如果拖動是從屏幕邊緣開始則不觸發(fā)swiper毛秘。
false(默認)
15.iOSEdgeSwipeThreshold——IOS的UIWebView環(huán)境下的邊緣探測距離。如果拖動小于邊緣探測距離則不觸發(fā)swiper阻课。
類型:number 默認:20 舉例:50