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