关于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