在寫pc端頁面時，用swiper插件發現在ie中用不了，百度下說是swiper從3以後向手機端發展，所以在pc端無響應。後來瞭解到，swiper3是專門針對移動端寫的。如果想相容IE8的話，應該引入swiper2. 也就是：idangerous.swiper.js 官網演示地址：http://2.s ...
在寫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的，所以樣式要改，要不然起衝突
