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 属性,其他的问题暂时没发现~
    有其他的问题欢迎留言讨论
posted @ 2020-09-24 15:22  ✔️zhangfl_go  阅读(410)  评论(0编辑  收藏  举报