Swiper交友群:群① 418951634     群② 526371207

Swiper常用于移動端網站的內容觸摸滑動

Swiper是純javascript打造的滑動特效插件,面向手機、平板電腦等移動終端。


Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。

Swiper開源、免費、穩定、使用簡單、功能強大,是架構移動終端網站的重要選擇!


右側范例來自某訊網,用到了這些特效:

Swiper擁有靈活的progress,這是自定義制作3D切換效果的利器

Swiper制作3D切換效果的方法多種多樣。cube、coverflowflip可以輕松的實現3D過渡,如果你想制作其他新穎的切換方式,推薦使用progress。

progress可以幫助你獲取到滑塊的進度索引。


右側3d宣傳冊范例用到了這些特效:

在Swiper上加些小動畫,制作時下最流行的微展示

使用Swiper再配合一些你喜歡的小動畫,你的圖片立即變成活靈活現的微場景、微海報。

常用的制作動畫的方法有CSS3、GreenSock、Anime.js、animate.css等。也推薦使用我們的Swiper Animate小插件,無需學習即可快速制作出精美的切換動畫效果。


Swiper Animate有大量的demo,下載后進行簡單修改即可,是伸手黨的最愛。


右側liveapp范例用到了這些特效:

Swiper 4 的特色功能

不依賴框架
Swiper無需加載任何公共庫(如jquery)即可運行,這保證了Swiper的輕量和運行速度。Swiper也可以在加載了公共庫的環境下安全的運行,如jQuery, Zepto, jQuery Mobile等
1:1的觸摸滑動
Swiper默認的觸摸比例為1:1,你可以通過修改Swiper的設置來改變這個比例。
監視器
Swiper可以通過設置開啟監視器,有了這個功能Swiper可以在你動態改變Dom或Swiper的樣式時自動重新初始化并計算所需的元素。
豐富的API
Swiper 擁有豐富的API,允許你建立自己獨特的分頁器、導航、視差滾動、或其他精彩的效果
真正支持RTL布局
Swiper是唯一一個支持100%RTL(右向左)布局的滑動插件??稍趕wiper-container上加dir="rtl"。
多行slides布局
Swiper允許多行Slides布局,這樣每行的slide就會較少。
過渡效果
增加了三種新的過渡效果:淡入、3D方塊、3D流。
雙向控制
現在Swiper可以用來控制其他的Swiper,甚至可以同時控制。
完整的導航控制
Swiper配備了常用的導航控制器,包括分頁器,切換箭頭,滾動條。
Flexbox布局
Swiper使用流行的flexbox布局,這樣就解決了很多計算尺寸方面的問題。這種布局也允許用CSS來設定Slides。
Flexbox網格
你可以在Swiper初始化的時候設定slide的顯示,包括每行、每列、每組數量以及他們的間距等。
視差過渡
Swiper支持流行的視差效果,你可以將視差效果應用于Swiper的內部元素,如圖片、文本、標題、背景圖等等..
圖片懶加載
Swiper對非active slide內的圖片實行延遲加載,這個功能加快了頁面的打開速度,提高了Swiper的使用體驗。
虛擬 Slides
Swiper 4新增了虛擬slides特性,當你有很多Slide或有很多內容的slide的時候可以在DOM中只保留需要的slide。
其他的特性
Swiper4還包含了所有swiper2的優秀特性,包括自適應、滾動反彈、抵抗反彈、loop模式、嵌套Swiper。

50,000+ 使用者,200,000+ 網站及應用

用Swiper來制作滑動切換已經成為現今網站或應用的潮流和標準

Swiper完全免費并開源(MIT Licensed)開始使用Swiper