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