Swiper插件(jiàn)
2023-11-20 429 作者:
字号:【小】【中】【大】
分享到:

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)切換動畫效果。

微信截圖_20231116143326.png

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è)人網站或商業網站,都無需付費。

最新(xīn)标簽
最新(xīn)更新(xīn)
我(wǒ)要試用(yòng)
驗證碼
獎勵領取
驗證碼
Copyright© 2022天健世紀. All Rights Reserved.
×
快速定制通道(dào)
獲取驗證碼
快速咨詢