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

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

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

1 2 3

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

转载于:https://www.cnblogs.com/liyanyu520/p/9590061.html