最近項目一些網站項目想到用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
的屬性來滾動的，沒定位滾動不了
好了！就這樣吧！上面的引入文件都是官方的文件， 自己去官網下載即可！
|