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;
      });
});