Swiper 在IE9 及其他浏览器使用
Swiper 在IE9 及其他浏览器使用
前言
昨天遇到一个问题,swiper 使用版本是3.4.2 除了Ie9浏览器外其他浏览器都正常,IE9 无法轮播,执行控制台报错源码问题。没办法,只能降级兼容了~
- html 模板引入swiper 相关的js 和 css 文件
<!--[if lt IE 9]>
IE9及以下放这里
<link href="../swiper2.7.6.css" rel=stylesheet>
<script type=text/javascript src="../swiper2.7.6.js"></script>
<!--[else]>
其他的放这里
<link href="../swiper3.4.2.css" rel=stylesheet>
<script type=text/javascript src="../swiper3.4.2.js"></script>
<![endif]-->
- js 文件里面也要判断兼容
- 注意 控制轮播方向的属性2 和 3 的不一样
const isIe9 = navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE9.0";
if(isIe9){
new Swiper('#swiper-container',{
loop:true,
mode:"vertical",// 注意这里 swiper2.7.6 控制轮播方向的是mode
autoplay:1500,
})
} else{
new Swiper('#swiper-container',{
loop:true,
direction:"vertical",
autoplay:1500
})
}
- 还遇到个问题就是 swiper2 版本不支持 设置 prevButton 和 nextButton 属性,其他的问题暂时没发现~
有其他的问题欢迎留言讨论
热爱我热爱的