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 的屬性來滾動的，沒定位滾動不了   好了！就這樣吧！上面的引入文件都是官方的文件， 本身去官網下載便可！