swiper的双向控制

Swiper的双向控制

最近在做需求的时候设计提到一个需求：两个轮播图一起滑动，用户滑动其中一个轮播图，另一个轮播图也跟着一起滑动。

解决办法

通过查看swiper文档，发现组件文档中有个controller选项，正是用来解决这个问题的。接下来将详细解释用法

首先假设两个swiper，分别初始化为swiper1和swiper2

如果只想通过swiper2去控制swiper1，那么我们可以这样做

var swiper1 = new Swiper('.swiper1')
var swiper2 = new Swiper('.swiper2',{
	//swiper2控制swiper1需要加的参数
	controller:{
		control: swiper1
	}
})

那如果想让两个swiper互相控制怎么办呢？一起来看

var swiper1 = new Swiper('.swiper1')
var swiper2 = new Swiper('.swiper2',{
	//控制swiper1
	controller:{
		control: swiper1
	}
})
//swiper1控制swiper2，必须在swiper2初始化后
swiper1.controller.control = swiper2  
//swiper2控制swiper1，必须在swiper1初始化后
swiper2.controller.control = swiper1

互相控制只需要多加两行代码就可以让两个swiper互相控制，同时滑动