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的属性来滚动的，没定位滚动不了好了！就这样吧！上面的引入文件都是官方的文件， 自己去官网下载即可！ |
