继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

zhangfl_go
关注TA
已关注
手记 40
粉丝 28
获赞 163

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" &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
		})
	}
  • 还遇到个问题就是 swiper2 版本不支持 设置 prevButton 和 nextButton 属性,其他的问题暂时没发现~
    有其他的问题欢迎留言讨论
打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP