swiper.js的使用

點擊api文檔地址，

（1）圖片輪播banner

<script src="js/jquery-2.1.4.min.js"></script> <script src="js/swiper.jquery.min.js"></script>
<script src="js/flexible.js"></script>
<link rel="stylesheet" href="css/main.css"/>
<link rel="stylesheet" href="css/swiper.min.css">

<!--banner-->
<div class="g-banner swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="img/banner_02.png">
        </div>
        <div class="swiper-slide">
            <img src="img/banner_02.png">
        </div>
        <div class="swiper-slide">
            <img src="img/banner_02.png">
        </div>
    </div>
    <!-- 若是須要分頁器 -->
    <div class="swiper-pagination"></div>
</div>
<!--banner-->

 樣式覆蓋，其實就是改了分頁的按鈕的樣式。

.g-banner .swiper-slide img { width: 10rem; height: 4.69rem;
} .g-banner .swiper-pagination-bullets { width: 1.81rem !important; height: 0.43rem !important; background: rgba(73, 73, 73, 0.5) !important; border-radius: 0.21rem 0.21rem !important; left: 50% !important; margin-left: -0.9rem !important; line-height: 0.43rem !important;
} .g-banner .swiper-pagination-bullet { width: 0.24rem !important; height: 0.24rem !important; background: #e1d0d2 !important; opacity: 1 !important;
} .g-banner .swiper-pagination-bullet-active { background: #a11d2c !important; opacity: 1 !important;
}

控制器裏的參數，按需求，api文檔很詳細。

 var mySwiperBanner = $(".g-banner.swiper-container").swiper({ direction: 'horizontal',//水平滾動 loop: true,//循環 autoplay: 3000,//自動播放 // 若是須要分頁器
            pagination: '.swiper-pagination' });

 

 關於swiper.js的初始化，官網是這樣的，以下圖。若是整個項目只有一處須要用到swiper，那就能夠這麼使用，

 可是個人項目中有不少須要用到的地方，因此就要初始化不少個不一樣的swiper。那就使用如上一個代碼辣樣的方式初始化swiper，

 上面的就初始化了一個專門用於輪播圖的swiper。

 

 （2）實現以下圖所示的效果，

        輪播這一模塊，導航欄中對應的tab標籤被選中；

       點擊上面的tab標籤，能切換到相應的頁面。

        

 

 

<div class="g-design">
    <div class="m-title">
        <a href="javascript:;">
            <i class="u-bg public-logo"></i>
            <span class="u-title-name">公益展現</span>
            <div class="design-style" id="public-list">
                <span class="current">水電</span>
                <span>木</span>
                <span>瓦</span>
                <span>煤</span>
            </div>
            <i class="u-bg moreInfo"></i>
        </a>
    </div>
    <div class="m-public-parent">
        <div class="swiper-container"> <div class="swiper-wrapper" id="slide-public">
                <div class="swiper-slide">
                    <div class="m-public-box">
                        <img src="img/gyzs_10.png" alt="">
                        <span class="ellipses w-4">工地裝修狀況展現</span>
                    </div>
                    <div class="m-public-box">
                        <img src="img/gyzs_10.png" alt="">
                        <span class="ellipses">工地裝修狀況展現</span>
                    </div>
                    <div class="m-public-box">
                        <img src="img/gyzs_10.png" alt="">
                        <span class="ellipses">工地裝修狀況展現</span>
                    </div>
                    <div class="m-public-box">
                        <img src="img/gyzs_10.png" alt="">
                        <span class="ellipses">工地裝修狀況展現</span>
                    </div>
                </div>
                <div class="swiper-slide">
                      。。。
                </div>
                <div class="swiper-slide">
                      。。。
                </div>
                <div class="swiper-slide">
                      。。。
                </div>
            </div>
        </div>
    </div>
</div>

 滑動slide頁面，則tags標籤裏對應的被選中。使用回調函數：onSlideChangeStart

  var mySwiperPublic = $(".m-public-parent .swiper-container").swiper({ direction: 'horizontal', onSlideChangeStart: function (swiper) { console.log(swiper.activeIndex); var i = swiper.activeIndex; $("#public-list").find('span').eq(i).addClass("current").siblings().removeClass("current"); } });

 結合下方api文檔的介紹，上述的代碼很簡單，一看就能懂，不贅述

  

 

 使用tags標籤來控制slide，則使用swiper方法中的slideTo方法，結合下圖所示的方法，操做起來萬分簡單。

 

$("#public-list span").each(function(i,e){ $(e).on("click",function(){ $(e).addClass("current").siblings().removeClass("current"); mySwiperPublic.slideTo(i, 1000, false); return false; }); });