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