swiper插件在ie浏览器无反应,解决办法
2019-09-17 09:58:47来源:博客园 阅读 ()
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" />
js
<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>
<script type="text/javascript">
var swiper = new Swiper('.swiper-container', {
// slidesPerView: "auto",
slidesPerView: 2,
spaceBetween: 0,
// mode: 'vertical', //2版本垂直滑动
// direction: 'vertical', //3版本垂直滑动
// pagination: {
// el: '.swiper-pagination',
// clickable: true,
// },
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
$('.arrow-left').on('click', function(e) {
e.preventDefault();
swiper.swipePrev();
})
$('.arrow-right').on('click', function(e) {
e.preventDefault();
swiper.swipeNext();
})
</script>
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的,所以样式要改,要不然起冲突
原文链接:https://www.cnblogs.com/cyhsmile/p/11527260.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:网页制作中的网页字体空格间距
- 关于浏览器兼容问题 2020-05-27
- 安装了https ssl证书,但浏览器显示并非完全安全(此页面内 2020-05-12
- 谷歌浏览器安装和开发者工具 2020-05-04
- Emmet插件的使用 2020-04-27
- 如何配置Tomcat上web.xml让浏览器能直接下载txt,xml类型文 2020-04-14
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash