Swiper2和Swiper3区别详解与兼容IE8/IE9

时间 2019-11-19

标签 swiper2 swiper swiper3 区别详解兼容 ie8 ie9 栏目浏览器繁體版

原文原文链接

　　最近项目一些网站项目想到用Swiper3来制做响应式，可是发现IE9都不兼容，而swiper2版本又少一个breakpoints参数作响应式脚本很是不方便，因而想到新版的浏览器用3 ，iE9和如下用2css

很简单的一个列子就是垂直滑动html

区别位置也只有一个java

1 2	`mode:` `'vertical'` `,` `//2版本垂直滑动` `direction:` `'vertical'` `,` `//3版本垂直滑动`

就是这个！只要在浏览器

var mySwiper = new Swiper('.swiper-container', {app

}ide

里面同时加入这个，而后头部文件，用IE 和非IE 来判断便可。flex

 
      <!--[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什么东西网站

 
      <!--[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了spa

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

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

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