關于Swiper

Swiper 是一款免費以及輕量級的移動設備觸控滑塊的js框架,使用硬件加速過渡(如果該設備支持的話)。主要使用于移動端的網站、移動web apps,native apps和hybrid apps。主要是為IOS而設計的,同時,在Android、WP8系統也有著良好的用戶體驗,Swiper從3.0開始不再全面支持PC端。因此,如需在PC上兼容更多的瀏覽器,可以選擇Swiper2.x(甚至支持IE7)。

Swiper 完全免費并開源(MIT Licensed),無論你使用在個人網站或商業網站,都無需付費。

 

我們致力于Swiper在國內的推廣

Swiper中文網在原文翻譯的基礎上增加了Swiper在線演示、Swiper中文教程、Swiper中文APi、優秀作品示例和資源下載。

網站歷史


 

目前有Swiper4.x、Swiper3.x和Swiper2.x這三個版本


Swiper4和Swiper3的主要區別


  swiper4.x swiper3.x
引入文件 swiper.min.js
swiper.min.css
swiper.min.js或swiper.jquery.min.js
swiper.min.css
兼容性 移動端瀏覽器、部分PC端瀏覽器、IE10+ 移動端瀏覽器、部分PC端瀏覽器
更新 正在更新 停止更新 最新版本3.4.2
組件 Navigation 分頁器
Pagination 按鈕
Scrollbar 滾動條
Autoplay 自動切換
Lazy Loading 延遲加載圖片
Fade Effect 漸變過渡
Coverflow Effect 行進翻轉過渡
Flip Effect 翻轉過渡
Cube Effect 方塊過渡
Zoom 縮放
Keyboard Control 鍵盤
Mousewheel Control 鼠標
Virtual Slides 虛擬塊
Hash Navigation 錨導航
History Navigation 歷史導航
Controller 相互控制
Accessibility 障礙使用輔助
fade 漸變
cube 方塊
coverflow 移動翻轉
flip 翻轉
回調函數變化 組件化并使用this關鍵字指代swiper實例

on:{
  click: function(){
    this.clickIndex//點擊的slide索引
  }
}
使用參數指代swiper實例

onClick: function(swiper){
  swiper.clickIndex//點擊的slide索引
}
參數名差異
禁止滑動 allowTouchMove: false onlyExternal: true
swiper屬性
mySwiper.$el
mySwiper.$wrapperEl
mySwiper.navigation.nextEl
mySwiper.navigation.prevEl
mySwiper.pagination.bullets
mySwiper.container
mySwiper.wrapper
mySwiper.prevButton
mySwiper.nextButton
mySwiper.bullets



Swiper3和Swiper2的主要區別


  swiper3.x swiper2.x
引入文件 swiper.min.js或swiper.jquery.min.js
swiper.min.css
idangerous.swiper.min.js
idangerous.swiper.css
移動機制 transform transform或left/top
布局方式 flex或一般布局,wrapper寬度為第一個slide 一般布局,wrapper寬度為slide總和
更新 停止更新 穩定版本3.4.2 停止更新 穩定版本2.7.6
兼容性 部分PC端瀏覽器,主流移動端瀏覽器 PC端瀏覽器,IE7+,部分移動端瀏覽器
支持IE7需引入JQuery
參數名差異
滑動方向 direction mode
free模式動量 freeModeMomentumRatio momentumRatio
偏移量 slidesOffsetBefore offsetPxBefore
3d流 coverflow tdFlow
導航按鈕 prevButton、nextButton swipePrev、swipeNext
跳轉至 slideTo、slidePrev、slideNext swipeTo、swipePrev、swipeNext
浙江11选5吧