首页手记 Swiper 在IE9 使用遇到的问题及解决办法

Swiper 在IE9 使用遇到的问题及解决办法

标签：

Html5 JavaScript

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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../swiper2.7.6.js"></script>
	<!--[else]>
		其他的放这里
		<link href="../swiper3.4.2.css" rel=stylesheet>
		<script type=text/javascript class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../swiper3.4.2.js"></script>
	<![endif]-->

js 文件里面也要判断兼容
注意控制轮播方向的属性2 和 3 的不一样

	const isIe9 = navigator.appName == "Microsoft Internet Explorer" &amp;&amp; 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
		})
	}