swiper兼容IE

我用的是2.X的版本,因為兼容ie8。swiper3是專門針對移動端寫的。如果想兼容IE8的話,應該引入swiper2.
官網演示地址:http://2.swiper.com.cn/demo/

swiper的css和js

鏈接:https://pan.baidu.com/s/1rWhJ1sCbcJVf4wfBRq_MYg 密碼:qcuw
css

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

html

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
    </div>
    <!-- 如果需要分頁器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要導航按鈕 -->
    <a class="arrow-left"></a>
    <a class="arrow-right"></a>
</div>

js

<script src="js/idangerous.swiper2.7.6.min.js"></script>
<script>
    var mySwiper = new Swiper('.swiper-container', {
        loop: true, //設置為true,則開啟loop(環(huán)路)模式,默認為false
        speed: 300,//滑動速度
        autoplay: 2000,//自動切換的時間間隔(單位ms),不設定該參數slide不會自動切換。
        autoplayDisableOnInteraction : false, //用戶操作swiper之后,是否禁止autoplay,默認為true:停止。
        //--  如果需要分頁器 --
        pagination: : '.swiper-pagination',
    })
   //--  如果需要前進后退按鈕 --
  $('.arrow-left').click(function(){
        mySwiper.swipePrev();
  });
  $('.arrow-right').click(function(){
        mySwiper.swipeNext();
  });
</script>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內容