Swiper2和Swiper3区别详解与兼容IE8/IE9

　　最近项目一些网站项目想到用Swiper3来制作响应式，但是发现IE9都不兼容， 而swiper2版本又少一个breakpoints参数 做响应式脚本非常不方便，于是想到新版的浏览器用3  ，iE9和以下用2

很简单的一个列子就是垂直滑动

区别位置也只有一个

1 2	mode: 'vertical' , //2版本垂直滑动     direction: 'vertical',//3版本垂直滑动

就是这个！ 只要在

   var mySwiper = new Swiper('.swiper-container', {

}

里面同时加入这个，然后头部文件，用IE 和非IE 来判断即可。

1 2 3 4 5 6 7 8

<!--[if !IE]><!-->  <link rel="stylesheet" href="st/css/swiper3.css"> <script src="st/js/swiper3.js"></script> <!--<![endif]--> <!--[if IE]> <link rel="stylesheet" href="st/css/swiper2.css"> <script src="st/js/swiper2.min.js"></script> <![endif]-->

或者下面这样，上面那个IE8下回出来if什么东西

1 2 3 4 5 6 7 8

<!--[if !IE]><!-->  <link rel="stylesheet" href="st/css/swiper3.css"> <script src="st/js/swiper3.js"></script> <!--<![endif]--> <!--[if IE]> <link rel="stylesheet" href="st/css/swiper2.css"> <script src="st/js/swiper2.min.js"></script> <![endif]-->

 

接下来就是分析css了

1 2 3 4 5 6 7 8

swiper3 的核心文件是    .wrapper{  display: flex;     flex-direction: column;//垂直对齐 } .swiper-slide{     flex-shrink: 0; // }

2就没什么好说的了，只要

1 2 3

wrapper{position:relative;}//这个一定要有，就是用top的属性来滚动的，没定位滚动不了   好了！就这样吧！上面的引入文件都是官方的文件， 自己去官网下载即可！