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