Swiper官网Swiper TFBOYS案例源码

swiper官网的TFBOY案例非常炫酷，看起来和平常的一个swiper轮播有点像，又不一样，平常是从一侧滚动到另一侧，这个是，三张图同步滚动，所以，一开始并没有弄出来，直到分析了源码才弄清楚原因，原来是三张图是三个轮播，滚动中间联动两边，用到了swiper的controller.control方法来实现联动。三个轮播内容一样，只是每个轮播里的顺序不一样。

注意：此方法只能在swiper 4.0之后有效，swiper3无效

1、引入css

<link rel="stylesheet" href="css/swiper.min.css">    
<link rel="stylesheet" href="css/style.css"></head>

2、加入html

<div class="banner">    
<div class="swiper">    
<div class="current-swiper swiper-container">    
<div class="swiper-wrapper">    
<div class="swiper-slide slide1">    
<div class="title">TFBOYS成员、歌手、演员、主持人</div>    
<div class="name">王源</div>    
<p class="detail">2011年底成为TF家族练习生，2013年8月6日以组合形式出道。</p></div>    
<div class="swiper-slide slide2">    
<div class="title">TFBOYS成员、男歌手、影视演员</div>    
<div class="name">王俊凯</div>    
<p class="detail">2010年底成为TF家族练习生，一年后其他学员陆续退出，只有王俊凯坚持下来，TF家族因此得以存续。</p></div>    
<div class="swiper-slide slide3">    
<div class="title">TFBOYS成员、男歌手、舞者、演员</div>    
<div class="name">易烊千玺</div>    
<p class="detail">2005年首登电视荧屏，开始参演各类综艺节目</p></div>    
</div>    
</div>    
<div class="swiper-button-prev"></div>    
<div class="swiper-button-next"></div>    
<div class="nocurrent-swiper left-swiper swiper-container">    
<div class="swiper-wrapper">    
<div class="swiper-slide slide3">    
<div class="title">TFBOYS成员、男歌手、舞者、演员</div>    
<div class="name">易烊千玺</div>    
<p class="detail">2005年首登电视荧屏，开始参演各类综艺节目</p></div>    
<div class="swiper-slide slide1">    
<div class="title">TFBOYS成员、歌手、演员、主持人</div>    
<div class="name">王源</div>    
<p class="detail">2011年底成为TF家族练习生，2013年8月6日以组合形式出道。</p></div>    
<div class="swiper-slide slide2">    
<div class="title">TFBOYS成员、男歌手、影视演员</div>    
<div class="name">王俊凯</div>    
<p class="detail">2010年底成为TF家族练习生，一年后其他学员陆续退出，只有王俊凯坚持下来，TF家族因此得以存续。</p></div>    
</div>    
</div>    
<div class="nocurrent-swiper right-swiper swiper-container">    
<div class="swiper-wrapper">    
<div class="swiper-slide slide2">    
<div class="title">TFBOYS成员、男歌手、影视演员</div>    
<div class="name">王俊凯</div>    
<p class="detail">2010年底成为TF家族练习生，一年后其他学员陆续退出，只有王俊凯坚持下来，TF家族因此得以存续。</p></div>    
<div class="swiper-slide slide3">    
<div class="title">TFBOYS成员、男歌手、舞者、演员</div>    
<div class="name">易烊千玺</div>    
<p class="detail">2005年首登电视荧屏，开始参演各类综艺节目</p></div>    
<div class="swiper-slide slide1">    
<div class="title">TFBOYS成员、歌手、演员、主持人</div>    
<div class="name">王源</div>    
<p class="detail">2011年底成为TF家族练习生，2013年8月6日以组合形式出道。</p></div>    
</div>    
</div>    
</div>    
</div>

3、引入js

<script src="js/swiper.min.js"></script>    
<script src="js/tfboys.min.js"></script>

4、初始化三个swiper，并加入联动

var currentSwiper = new Swiper('.current-swiper',{
	loop : true,
});
currentSwiper.$el.parent().find('.swiper-button-next').on('click',function(){//去除按钮阴影
	currentSwiper.slideNext();
})
currentSwiper.$el.parent().find('.swiper-button-prev').on('click',function(){
	currentSwiper.slidePrev();
})			
var leftSwiper = new Swiper('.left-swiper',{
	loop : true,
	simulateTouch : false,
});
var rightSwiper = new Swiper('.right-swiper',{
	loop : true,
	simulateTouch : false,
});			
currentSwiper.controller.control = [leftSwiper,rightSwiper];