关于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、优秀作品示例和资源下载。

网站历史


 

Swiper各版本比较


Swiper 各版本的主要区别


  swiper9 swiper8 swiper7 swiper6 swiper5 swiper4 swiper3 swiper2
引入文件 swiper-bundle.min.js
swiper-bundle.min.css		 swiper-bundle.min.js
swiper-bundle.min.css		 swiper-bundle.min.js
swiper-bundle.min.css		 swiper-bundle.min.js
swiper-bundle.min.css		 swiper.min.js
swiper.min.css		 swiper.min.js
swiper.min.css		 swiper.min.js或swiper.jquery.min.js
swiper.min.css		 idangerous.swiper.min.js
idangerous.swiper.css
机制 移除dom7 不变 不变 Swiper5 增加了CSS模式（cssMode），并且可以通过CSS文件修改Swiper颜色风格。 不变 移动机制：transform
flex或一般布局，wrapper宽度为第一个slide		 移动机制：transform或left/top
一般布局，wrapper宽度为slide总和
兼容性 不变 不变 不再全面支持IE 不再全面支持IE 不再全面支持IE 移动端浏览器、部分PC端浏览器、IE10+
 移动端浏览器、部分PC端浏览器 IE7+，部分移动端，IE7需引入JQuery
更新 停止更新 稳定版本9.4.1 停止更新 稳定版本8.4.7 停止更新 稳定版本7.4.1 停止更新 稳定版本6.8.4 停止更新 稳定版本5.4.5 停止更新 稳定版本4.5.1 停止更新 稳定版本3.4.2 停止更新 稳定版本2.7.6
组件 支持React、Vue、Element 支持React、Svelte、Vue、Angular、Solid（8.3.0） 不变 新增swiper的React、Svelte、Vue.js版本，
作为前端框架的组件使用		 不变 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 翻转		 Smooth Progress插件
Swiper 3D flow插件
Scrollbar插件
回调函数变化 既可使用this关键字，也可使用swiper作为函数参数 

      on:{
        click: function(swiper){
          this.clickIndex//点击的slide索引
          swiper.clickIndex//点击的slide索引
        }
      }
 不变 组件化并使用this关键字指代swiper实例 

      on:{
        click: function(){
          this.clickIndex//点击的slide索引
        }
      }
 使用参数指代swiper实例 

      onClick: function(swiper){
        swiper.clickIndex//点击的slide索引
      }
 使用参数指代swiper实例 

      onClick: function(swiper){
        swiper.clickIndex//点击的slide索引
      }
参数名差异 Swiper默认容器由
.swiper-container
改为.swiper		 不变 不变 禁止滑动allowTouchMove: false 滑动方向 direction
free模式动量 freeModeMomentumRatio
偏移量 slidesOffsetBefore
3d流 coverflow
导航按钮 prevButton、nextButton
Slide跳转函数 slideTo、slidePrev、slideNext
禁止滑动onlyExternal: true		 滑动方向 mode
free模式动量 momentumRatio
偏移量 offsetPxBefore
3d流 tdFlow插件
导航按钮 swipePrev、swipeNext
Slide跳转函数 swipeTo、swipePrev、swipeNext
swiper属性 不变 不变 不变 
mySwiper.$el
mySwiper.$wrapperEl
mySwiper.navigation.nextEl
mySwiper.navigation.prevEl
mySwiper.pagination.bullets
      
mySwiper.container
mySwiper.wrapper
mySwiper.prevButton
mySwiper.nextButton
mySwiper.bullets