swiper插件在ie浏览器无反应，解决办法

在写pc端页面时，用swiper插件发现在ie中用不了，百度下说是swiper从3以后向手机端发展，所以在pc端无响应。后来了解到，swiper3是专门针对移动端写的。如果想兼容IE8的话，应该引入swiper2.
也就是：idangerous.swiper.js

官网演示地址：http://2.swiper.com.cn/demo/

swiper2下载地址

链接：https://pan.baidu.com/s/1rWhJ1sCbcJVf4wfBRq_MYg 密码：qcuw
参考源码：

css:

<link rel="stylesheet" type="text/css" href="../css/idangerous.swiper.css" />

<script src="../js/idangerous.swiper.js" type="text/javascript" charset="utf-8"></script>

html

  <div class="container-middle-solution">

    <div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="container-middle-solution-pc">
<div>
<a class="title">网络解决方案</a>
</div>
<div>我们做响应网站，网页开发，区块链开发，UI/UX设计，CRM解决方案，托管服务器解决方案。</div>
<div>
<img src="../img/index-pc.png">
</div>
</div>
</div>
<div class="swiper-slide">
<div class="container-middle-solution-pc">
<div>移动解决方案</div>
<div>我们做iOS应用开发，Android应用开发，混合APP开发以及移动应用市场咨询。</div>
<div>
<img src="../img/index-pc.png">
</div>
</div>
</div>
<div class="swiper-slide">
<div class="container-middle-solution-pc">
<div>网络解决方案</div>
<div>我们做响应网站，网页开发，区块链开发，UI/UX设计，CRM解决方案，托管服务器解决方案。</div>
<div>
<img src="../img/index-pc.png">
</div>
</div>
</div>
<div class="swiper-slide">
<div class="container-middle-solution-pc">
<div>网络解决方案</div>
<div>我们做响应网站，网页开发，区块链开发，UI/UX设计，CRM解决方案，托管服务器解决方案。</div>
<div>
<img src="../img/index-pc.png">
</div>
</div>
</div>
<div class="swiper-slide">
<div class="container-middle-solution-pc">
<div>网络解决方案</div>
<div>我们做响应网站，网页开发，区块链开发，UI/UX设计，CRM解决方案，托管服务器解决方案。</div>
<div>
<img src="../img/index-pc.png">
</div>
</div>
</div>
<div class="swiper-slide">
<div class="container-middle-solution-pc">
<div>网络解决方案</div>
<div>我们做响应网站，网页开发，区块链开发，UI/UX设计，CRM解决方案，托管服务器解决方案。</div>
<div>
<img src="../img/index-pc.png">
</div>
</div>
</div>
<div class="swiper-slide">
<div class="container-middle-solution-pc">
<div>网络解决方案</div>
<div>我们做响应网站，网页开发，区块链开发，UI/UX设计，CRM解决方案，托管服务器解决方案。</div>
<div>
<img src="../img/index-pc.png">
</div>
</div>
</div>
</div>
<!-- Add Arrows -->
<!--<div class="icon-left">-->
<!--<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>-->
<a class="arrow-left" href="#"></a>
<a class="arrow-right" href="#"></a>
</div>
</div>

css样式问题

.swiper-container {width: 100%;
padding-bottom: 100px;
}
/*.swiper-slide {
background-position: center;
background-size: cover;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}*/
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {background: url(../img/index-left.png) center center no-repeat;
background-size: 100%;
100%;
left: 52px;
right: auto;
top: 220px;
width: 54px;
height: 54px;
}
/*.arrow-left {
background: url(../img/index-left.png) center center no-repeat;
background-size: 100%;
100%;
left: 52px;
right: auto;
top: 220px;
width: 54px;
height: 54px;
}*/
.arrow-left {background: url(../img/index-left.png) no-repeat left top;
position: absolute;
left: 36px;
top: 180px;
margin-top: -15px;
width: 54px;
height: 54px;
background-size: 100% 100%;
}
.arrow-right {background: url(../img/index-right.png) no-repeat left bottom;
position: absolute;
/* right: 10px; */
left: 110px;
top: 180px;
margin-top: -15px;
width: 54px;
height: 54px;
background-size: 100% 100%;
}

效果

注意：在引用css2.0是有些样式之前写的4.0的，所以样式要改，要不然起冲突

写每个轮播之间的间距，要实现除了第一个之外，其他加上margin-left。那么在<div class="swiper-slide swiper-slides"> 里面，我这加的是swiper-slides

.swiper-slides:not(:first-child){
margin-left: 10px !important;

}

swiper插件在ie浏览器无反应，解决办法相关推荐

浏览器无声音解决办法
持续了挺长时间了,一直解决不了,系统声音正常,但就是浏览器没声儿了... 后来终于找到解决办法导入一个注册表文件就好了文件可以从http://www.kellys-korner-xp.com/re ...
Microsoft Edge浏览器不兼容解决办法
Microsoft Edge浏览器不兼容解决办法报错代码:STATUS_INVALID_IMAGE_HASH 步骤 1.按win +R键,打开运行命令框. 2.输入 regedit ,打开注册表编辑 ...
ie 无人操作自动关闭_为什么一打开IE浏览器就自动关闭解决办法 IE浏览器打开后马上自动关闭了如何办...
为什么一打开IE浏览器就自动关闭解决办法 IE浏览器打开后马上自动关闭了如何办我们在使用PC的时候,总是会遇到很多的PC难题 .当我们在遇到了ie打开打开后网页自动关闭的时候,那么我们需要如何办呢?今 ...
苹果xr怎么截屏_手机资讯:iPhone XR更新系统后无信号怎么办iPhone XR无信号解决办法...
如今使用IT数码设备的小伙伴们是越来越多了,那么IT数码设备当中是有很多知识的,这些知识很多小伙伴一般都是不知道的,就好比最近就有很多小伙伴们想要知道iPhone XR更新系统后无信号怎么办iPhon ...
Windows 安全中心空白无选项解决办法
Windows 安全中心空白无选项解决办法复制下面的命令,在CMD(命令提示符)中以管理员身份运行,然后重启电脑. REG ADD "HKEY_LOCAL_MACHINE\SYSTEM\C ...
win10任务栏搜索框无反应解决办法
win10任务栏搜索框无反应解决办法一.使用过的方法二.成功的办法一.使用过的方法 1.首先,打开管理员命令窗口,win+x,可以看到弹出一个窗口,打开windows Powershell(管理 ...
苹果7升级系统后无服务器,iPhone7显示无服务怎么办 iPhone7显示无服务解决办法...
类型:ios影音娱乐大小:25.6M语言:中文评分:10.0 标签: 立即下载 iPhone7手机现在深受果粉的喜欢,不仅是因为它好看的外观,更是因为它强大的系统还有就是不会卡顿.但是不少用户在使用 ...
王者荣耀苹果安卓不显示服务器,王者荣耀苹果、安卓用户换机之后数据全无，解决办法来了？...
原标题:王者荣耀苹果.安卓用户换机之后数据全无,解决办法来了? 手游已经非常普及,但是对于手游玩家而言,部分人使用的苹果手机,另外一部分玩家则是使用的是安卓手机,大家进入的服务器不同,而且不同服务器之 ...
vue+cesium cesium数据量太大导致浏览器卡顿解决办法
vue+cesium cesium数据量太大导致浏览器卡顿解决办法解决方案 : 不要把任何的cesium对象放在data中监听,因为在data中的变量 , vue会劫持数据 , 导致迟缓. 解 ...

swiper插件在ie浏览器无反应，解决办法

swiper插件在ie浏览器无反应，解决办法相关推荐

最新文章

热门文章