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

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

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

区别位置也只有一个

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

就是这个! 只要在

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

}

里面同时加入这个,然后头部文件,用IE 和非IE 来判断即可。

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

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

2就没什么好说的了,只要

wrapper{position:relative;}//这个一定要有,就是用top的属性来滚动的,没定位滚动不了

好了!就这样吧!上面的引入文件都是官方的文件, 自己去官网下载即可!


写的好!

微信扫一扫赏大洋