Swiper學習筆記(二)

一、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
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末叫挟,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子限煞,更是在濱河造成了極大的恐慌抹恳,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,311評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件署驻,死亡現(xiàn)場離奇詭異奋献,居然都是意外死亡,警方通過查閱死者的電腦和手機旺上,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2 382
  • 文/潘曉璐 我一進店門瓶蚂,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人宣吱,你說我怎么就攤上這事窃这≌骱颍” “怎么了杭攻?”我有些...
    開封第一講書人閱讀 152,671評論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長疤坝。 經(jīng)常有香客問我兆解,道長,這世上最難降的妖魔是什么跑揉? 我笑而不...
    開封第一講書人閱讀 55,252評論 1 279
  • 正文 為了忘掉前任历谍,我火速辦了婚禮扮饶,結(jié)果婚禮上甜无,老公的妹妹穿的比我還像新娘。我一直安慰自己眠饮,他們只是感情好仪召,可當我...
    茶點故事閱讀 64,253評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著召娜,像睡著了一般玖瘸。 火紅的嫁衣襯著肌膚如雪雅倒。 梳的紋絲不亂的頭發(fā)上屯断,一...
    開封第一講書人閱讀 49,031評論 1 285
  • 那天,我揣著相機與錄音趴久,去河邊找鬼彼棍。 笑死座硕,一個胖子當著我的面吹牛华匾,可吹牛的內(nèi)容都是我干的萨西。 我是一名探鬼主播旭旭,決...
    沈念sama閱讀 38,340評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼源梭,長吁一口氣:“原來是場噩夢啊……” “哼废麻!你這毒婦竟也來了仲闽?” 一聲冷哼從身側(cè)響起僵朗,我...
    開封第一講書人閱讀 36,973評論 0 259
  • 序言:老撾萬榮一對情侶失蹤顶吮,失蹤者是張志新(化名)和其女友劉穎悴了,沒想到半個月后违寿,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體藤巢,經(jīng)...
    沈念sama閱讀 43,466評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡才沧,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,937評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了岁歉。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片膝蜈。...
    茶點故事閱讀 38,039評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡帆啃,死狀恐怖诽偷,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤蜗顽,帶...
    沈念sama閱讀 33,701評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站雨让,受9級特大地震影響雇盖,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜栖忠,卻給世界環(huán)境...
    茶點故事閱讀 39,254評論 3 307
  • 文/蒙蒙 一崔挖、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧庵寞,春花似錦狸相、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至属拾,卻和暖如春将谊,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背渐白。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工尊浓, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人纯衍。 一個月前我還...
    沈念sama閱讀 45,497評論 2 354
  • 正文 我出身青樓栋齿,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子瓦堵,可洞房花燭夜當晚...
    茶點故事閱讀 42,786評論 2 345

推薦閱讀更多精彩內(nèi)容

  • Vue-Awesome-Swiper[https://github.com/surmon-china/vue-aw...
    李霖弢閱讀 2,558評論 0 0
  • 一了解Swiper Swiper 是一款免費以及輕量級的移動設(shè)備觸控滑塊的框架基协,使用硬件加速過渡(如果該設(shè)備支持的...
    尼尼嘎嘎閱讀 1,266評論 0 1
  • 我大學學的專業(yè)是日語,現(xiàn)在仍然在學菇用。 每次別人問我學的是什么專業(yè)的時候澜驮,我都會忸怩一下,稍微有些不好意思惋鸥,小聲的說...
    瑞欣的陽臺閱讀 1,326評論 5 7
  • 好久好久沒有看到油菜花了杂穷,下午出門看到田地里的油菜花,真的美極了卦绣。 想起油菜花耐量,最初的記憶就是上中學時,家離學校有...
    薛靜春閱讀 226評論 3 1
  • XeLaTeX/LuaLaTeX 設(shè)置 原文:Typesetting With XeLaTeX/LuaLaTeX ...
    布客飛龍閱讀 1,117評論 0 3