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 属性,其他的问题暂时没发现~

    有其他的问题欢迎留言讨论

Swiper 在IE9 及其他浏览器使用的更多相关文章

  1. 让 IE9 以下的浏览器支持 Media Queries

    1. 如何让 IE9 以下的浏览器支持 css3 的media query 需要用到的 min-width/max-width 属性 css3 的媒体查询 IE 浏览器的支持程度是从 IE9开始支持, ...

  2. IE9 以下版本浏览器兼容HTML5的方法,使用百度静态资源的html5shiv包

    <!--[if lt IE9]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.j ...

  3. swiper轮播在ie浏览器上遇到的显示问题探索

    前言: 最近项目有一个需求,想要下图效果,鼠标指向头像图片,图片会放大同时上面的轮播会跟着切换: 鼠标移开头像图片,图片变回原来的大小 注:下图是我根据上面需求已经实现的效果,所以截图方便说明 思考: ...

  4. jquery ajax在跨域访问post请求的时候,包括ie9以下的浏览器无效,其他浏览器正常

    最近做的一个项目,原先没有要求兼容IE9以下,所以在写代码的时候也没有打开IE9以下去测试,这两天要去做IE9以下的兼容,在IE9以下打开本地的项目发现数据请求不成功,而通过发布道服务器上的链接打开是 ...

  5. IT兄弟连 HTML5教程 设置IE9以下版本浏览器支持HTML5

    HTML2.HTML5刚发布时由于各浏览器之间的标准不统一,开发者的时间都浪费在解决Web浏览器之间的兼容性上.但由于W3C和WHATWG对HTML5新版本的制定,以及近年来对HTML5的使用,再加上 ...

  6. loadrunner11录制脚本打开IE9失败,浏览器崩溃,显示无法响应

    解决办法:工具-->Internet选项-->高级-->禁止ie启用第三方浏览器扩展

  7. IE9以下版本浏览器对HTML5新增标签不识别,导致CSS不起作用的问题

    使用Javascript来使不支持HTML5的浏览器支持HTML标签.目前大多网站采用的这种方式(Bootcss官方例子也是如此). 在<head></head>标签内添加 2 ...

  8. 清除IE8/IE9/IE10/IE11浏览器缓存文件 100%有效

    不管你是哪个版本的IE浏览器,按照下面指示操作,都能清除掉你使用浑身解数也清不掉的缓存文件! 第一步,打开IE浏览器——工具——Internet选项 有的IE浏览器的Internet选项藏在右上角一个 ...

  9. ie9以下的浏览器兼容性问题

    .bind不兼容的问题Function.prototype.bind = function () { var fn = this, args = Array.prototype.slice.call( ...

随机推荐

  1. Vue生命周期,我奶奶看了都懂了

    最近一直在学习Vue,而vue生命周期是我们不可能绕开的一个很核心的知识点,今天来简单的梳理一下大概的内容. 一.钩子函数 在一开始学习的时候,总有钩子函数这个名词冒出来,而且在vue官网文档中也频繁 ...

  2. ZK的watch机制

    1.watcher原理框架 由图看出,zk的watcher由客户端,客户端WatchManager,zk服务器组成.整个过程涉及了消息通信及数据存储. zk客户端向zk服务器注册watcher的同时, ...

  3. Springboot中登录后关于cookie和session拦截案例

    目录 一.前言 二.利用Cookie进行登录验证 一.前言 1.简单的登录验证可以通过Session或者Cookie实现. 2.每次登录的时候都要进数据库校验下账户名和密码,只是加了cookie 或s ...

  4. Hadoop 2.6.1 集群安装配置教程

    集群环境: 192.168.56.10 master 192.168.56.11 slave1 192.168.56.12 slave2 下载安装包/拷贝安装包 # 存放路径: cd /usr/loc ...

  5. 区块链入门到实战(18)之以太坊(Ethereum) – 什么是智能合约

    作用:提供优于传统合约的安全方法,并减少与合约相关的其他交易成本. 以太坊网络基石:以太坊虚拟币和智能合约. 智能合约(Smart contract )是一种旨在以信息化方式传播.验证或执行合同的计算 ...

  6. Spring Cloud--尚硅谷2020最新版

    Spring Cloud 初识Spring Cloud与微服务 在传统的软件架构中,我们通常采用的是单体应用来构建一个系统,一个单体应用糅合了各种业务模块.起初在业务规模不是很大的情况下,对于单体应用 ...

  7. Android开发必有功能,更新版本提示,检测是否有新版本更新。下载完成后进行安装。

    作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985,转载请说明出处. 给大家介绍个东西,MarkDown真的超级超级好用.哈哈.好了, 正题内容如下: 先 ...

  8. Android开发值利用Intent进行put传值,setclass启动activity,并用get进行取值

    传值方法一 [java] Intent intent = new Intent(); Bundle bundle = new Bundle(); //该类用作携带数据 bundle.putString ...

  9. redis在windows下安装教程

    安装过程 1.首先先把下载的压缩包解压到一个文件夹中2.打开cmd指令窗口3.输入你刚才解压的文件路径4.然后输入redis-server redis.windows.conf 命令接下来部署Redi ...

  10. Nginx 前端项目配置 包含二级目录和接口代理

    Nginx是目前用的比较多的一个前端服务器 其优点是配置简单修改一下server就能用 并发性能比较好,具体怎么好就看这个吧 开撸 1.找到nginx (liunx系统,已安装) whereis ng ...