Swiper 是一款免費(fèi)以及輕量級(jí)的移動(dòng)設(shè)備觸控滑塊的js框架,使用硬件加速過(guò)渡(如果該設(shè)備支持的話)。主要使用于移動(dòng)端的網(wǎng)站、移動(dòng)web apps,native apps和hybrid apps。主要是為IOS而設(shè)計(jì)的,同時(shí),在Android、WP8系統(tǒng)也有著良好的用戶體驗(yàn),Swiper從3.0開始不再全面支持PC端。因此,如需在PC上兼容更多的瀏覽器,可以選擇Swiper2.x(甚至支持IE7)。
Swiper常用于移動(dòng)端網(wǎng)站的內(nèi)容觸摸滑動(dòng)
Swiper是純javascript打造的滑動(dòng)特效插件,面向手機(jī)、平板電腦等移動(dòng)終端。
Swiper能實(shí)現(xiàn)觸屏焦點(diǎn)圖、觸屏Tab切換、觸屏輪播圖切換等常用效果。
Swiper開源、免費(fèi)、穩(wěn)定、使用簡(jiǎn)單、功能強(qiáng)大,是架構(gòu)移動(dòng)終端網(wǎng)站的重要選擇!
Swiper擁有靈活的progress,這是自定義制作3D幻燈片切換效果的利器
Swiper制作3D切換效果的方法多種多樣。cube、coverflow、flip、cards和creative可以輕松的實(shí)現(xiàn)3D過(guò)渡,如果你想制作其他新穎的切換方式,推薦使用progress。
progress可以幫助你獲取到滑塊的進(jìn)度索引。
在Swiper上加些小動(dòng)畫,制作時(shí)下最流行的微展示
使用Swiper再配合一些你喜歡的小動(dòng)畫,你的圖片立即變成活靈活現(xiàn)的微場(chǎng)景、微海報(bào)。
常用的制作動(dòng)畫的方法有CSS3、GreenSock、Anime.js、animate.css等。也推薦使用我們的Swiper Animate小插件,無(wú)需學(xué)習(xí)即可快速制作出精美的切換動(dòng)畫效果。
Swiper 的特色功能
不依賴公共庫(kù)
Swiper無(wú)需加載任何公共庫(kù)(如jquery)即可運(yùn)行,這保證了Swiper的輕量和運(yùn)行速度。Swiper也可以在加載了公共庫(kù)的環(huán)境下安全的運(yùn)行,如jQuery, Zepto, jQuery Mobile等。
支持流行的前端框架
從Swiper6版本開始提供了流行前端框架的支持,可以將swiper作為組件添加到這些框架中方便使用,如React,Svelte,Vue.js,Angular等。
1:1的觸摸滑動(dòng)
Swiper默認(rèn)的觸摸比例為1:1,你可以通過(guò)修改Swiper的設(shè)置來(lái)改變這個(gè)比例。
監(jiān)視器
Swiper可以通過(guò)設(shè)置開啟監(jiān)視器,有了這個(gè)功能Swiper可以在你動(dòng)態(tài)改變Dom或Swiper的樣式時(shí)自動(dòng)重新初始化并計(jì)算所需的元素。
豐富的API
Swiper 擁有豐富的API,允許你建立自己獨(dú)特的分頁(yè)器、導(dǎo)航、視差滾動(dòng)、或其他精彩的效果。
真正支持RTL布局
Swiper是唯一一個(gè)支持100%RTL(右向左)布局的滑動(dòng)插件??稍趕wiper-container上加dir="rtl"。
多行slides布局
Swiper允許多行Slides布局,這樣每行的slide就會(huì)較少。
豐富的過(guò)渡效果
內(nèi)置了淡入、3D方塊、3D流、3D翻轉(zhuǎn)、卡片、創(chuàng)意性等6種效果,方便輕松使用。
雙向控制
現(xiàn)在Swiper可以用來(lái)控制其他的Swiper,甚至可以同時(shí)控制。
完整的導(dǎo)航控制
Swiper配備了常用的導(dǎo)航控制器,包括分頁(yè)器,切換箭頭,滾動(dòng)條。
Flexbox布局
Swiper使用流行的flexbox布局,這樣就解決了很多計(jì)算尺寸方面的問(wèn)題。這種布局也允許用CSS來(lái)設(shè)定Slides。
Flexbox網(wǎng)格
你可以在Swiper初始化的時(shí)候設(shè)定slide的顯示,包括每行、每列、每組數(shù)量以及他們的間距等。
視差過(guò)渡
Swiper支持流行的視差效果,你可以將視差效果應(yīng)用于Swiper的內(nèi)部元素,如圖片、文本、標(biāo)題、背景圖等等...
圖片懶加載
Swiper對(duì)非active slide內(nèi)的圖片實(shí)行延遲加載,這個(gè)功能加快了頁(yè)面的打開速度,提高了Swiper的使用體驗(yàn)。
虛擬 Slides
Swiper 5新增了虛擬slides特性,當(dāng)你有很多Slide或有很多內(nèi)容的slide的時(shí)候可以在DOM中只保留需要的slide。
其他的特性
Swiper5還包含了所有swiper2的優(yōu)秀特性,包括自適應(yīng)、滾動(dòng)反彈、抵抗反彈、loop模式、嵌套Swiper。
Swiper 完全免費(fèi)并開源(MIT Licensed),無(wú)論你使用在個(gè)人網(wǎng)站或商業(yè)網(wǎng)站,都無(wú)需付費(fèi)。
微信公眾號(hào)
業(yè)務(wù)咨詢:400-9969-069(24小時(shí)服務(wù)) 028-86052918
售后熱線:028-86052836
公司地址:成都市武侯區(qū)天益街38號(hào)理想中心3棟1810