久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

當(dāng)前位置：網(wǎng)站首頁(yè) /資料庫(kù)/前端知識(shí)

2018/01

觸摸內(nèi)容滑動(dòng)插件swiper的基本操作與應(yīng)用

發(fā)布時(shí)間：2018-01-25 18:20:28

發(fā)布者：565633147

瀏覽量:

說(shuō)起目前應(yīng)用較廣泛的移動(dòng)端網(wǎng)頁(yè)觸摸內(nèi)容滑動(dòng)插件你想到的是什么呢？

相信大多數(shù)人應(yīng)該都能想到swiper 。

開(kāi)源 ,免費(fèi),強(qiáng)大的觸摸滑動(dòng)功能是它身上很明顯的標(biāo)簽。

QQ圖片20180125181815.png

也是因?yàn)轺梓胄℃?zhèn)這個(gè)項(xiàng)目了解并慢慢熟悉swiper的。

那么今天我們就一起來(lái)了解一下這款功能強(qiáng)大的插件吧。

首先加載插件一定需要用到它本身的一些文件，而swiper需要引進(jìn)下面的兩個(gè)文件

或者也可以直接引用cdn提供的swiper鏈接

引入文件之后，需要按照官方提示的方法進(jìn)行調(diào)用

html頁(yè)面這樣的調(diào)用

里面包括了free模式、網(wǎng)格分布、切換效果、觸發(fā)條件，點(diǎn)擊。。。

這里就不一一贅述啦，今天就了解一下swiper關(guān)于常用的一些參數(shù)。

調(diào)用swiper的時(shí)候需要進(jìn)行初始化，然后在里面添加你需要的屬性。

現(xiàn)在就來(lái)認(rèn)識(shí)下面的屬性：

滑動(dòng)方向：橫向（horizontal）/豎向(vertical) ，默認(rèn)是橫向切換

滑動(dòng)速度 speed 單位：ms 指slide從開(kāi)始到結(jié)束的時(shí)間

初始化slide 的索引 initialSlide：數(shù)字設(shè)定頁(yè)面加載完成時(shí)，第幾張圖片先顯示

循環(huán)播放 loop：true/false

direction : 'vertical',

是否自動(dòng)切換：autoplay true/false 默認(rèn)不自動(dòng)切換

切換效果：effect ----- 常用的slide（位移） fade （淡入） cube （方塊） flip(翻轉(zhuǎn)) coverflowEffect(3d流)

fade效果為true時(shí) slide透明度1->0（淡出） 0->1（淡入）

cube 效果 slideShadows ：true/false 是否開(kāi)啟slide陰影 shadowOffset (投影距離）單位：px /shadowScale（投影縮放比例）

flip效果它也有陰影參數(shù) 和cube一樣此外還可以限制最大旋轉(zhuǎn)角度（limitRotation ）180° ：true/false 默認(rèn)是true

coverflowEffect效果 rotate 旋轉(zhuǎn)角度 (默認(rèn)50) 、同樣帶有陰影功能還有slide的拉伸值（stretch）默認(rèn)為0 類(lèi)似間距

depth是每個(gè)slide的位置這里是以z軸為點(diǎn)默認(rèn)為100 。

分頁(yè) pagination ----- 一種是默認(rèn)的（半透明）還有一種自定義的（上面帶數(shù)字）

前后退鍵 navigation----nextEl以及prevEl

滾動(dòng)條 scrollbar

顯示方式slidesPerView：數(shù)字可以自己填寫(xiě) 表示slide里面顯示個(gè)數(shù)

滑塊之間持續(xù)時(shí)間 speed

每個(gè)slide之家的間隙 spaceBetween

鼠標(biāo)狀態(tài) grabCursor：true/false

是否可以點(diǎn)擊 clickable:true/false

自動(dòng)高度 autoHeight ：true/false 根據(jù)slide的高度調(diào)整

多行布局里每行的slide的數(shù)量 slidesPerColumn。

那么如果你想在同一個(gè)頁(yè)面多次調(diào)用swiper，為了避免混亂，建議給每個(gè)調(diào)用添加父類(lèi)或者同級(jí)再定義一個(gè)類(lèi)。

可以參考一下這篇針對(duì)同一頁(yè)面swiper的多次調(diào)用辦法的文檔http://www.geizy.cn/html/show-799.html

上一篇：如何使用jQuery完成復(fù)選框的全選和全不選？

下一篇：高度設(shè)100%無(wú)效解決辦法

關(guān)鍵詞:

Swiper

返回列表

相關(guān)文章

2019-08-08

睢寧縣工商業(yè)聯(lián)合會(huì) 查看詳情

相關(guān)案例

睢寧縣工商業(yè)聯(lián)合會(huì)

聯(lián)合會(huì)