首页 > 特效插件 > 滚动轮播 >  Swiper官网Swiper TFBOYS案例源码正文

Swiper官网Swiper TFBOYS案例源码

特效介绍

大图缩略图.png


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

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

使用方法

1、引入css


2、加入html

                              TFBOYS成员、歌手、演员、主持人          王源          2011年底成为TF家族练习生,2013年8月6日以组合形式出道。                  TFBOYS成员、男歌手、影视演员          王俊凯          2010年底成为TF家族练习生,一年后其他学员陆续退出,只有王俊凯坚持下来,TF家族因此得以存续。                  TFBOYS成员、男歌手、舞者、演员          易烊千玺          2005年首登电视荧屏,开始参演各类综艺节目                      
                            TFBOYS成员、男歌手、舞者、演员          易烊千玺          2005年首登电视荧屏,开始参演各类综艺节目                  TFBOYS成员、歌手、演员、主持人          王源          2011年底成为TF家族练习生,2013年8月6日以组合形式出道。                  TFBOYS成员、男歌手、影视演员          王俊凯          2010年底成为TF家族练习生,一年后其他学员陆续退出,只有王俊凯坚持下来,TF家族因此得以存续。              
                            TFBOYS成员、男歌手、影视演员          王俊凯          2010年底成为TF家族练习生,一年后其他学员陆续退出,只有王俊凯坚持下来,TF家族因此得以存续。                  TFBOYS成员、男歌手、舞者、演员          易烊千玺          2005年首登电视荧屏,开始参演各类综艺节目                  TFBOYS成员、歌手、演员、主持人          王源          2011年底成为TF家族练习生,2013年8月6日以组合形式出道。

3、引入js


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];


下载 提取码/密码:nhkf(点击复制密码) 预览