Swiper Controller(双向控制) - By

设定Swiper相互控制时的控制方式。当两个swiper的slide数量不一致时可用。
默认为'slide',自身切换一个slide时,被控制方也切换一个slide。
可选:'container',按自身slide在container中的位置比例进行控制。
例:有4个slide的swiper1控制有7个slide的swiper2,
设定'slide', swiper1的1, 2, 3, 4对应控制的swiper2为1, 2, 3, 7。
设定by: 'container',swiper1的1, 2, 3, 4对应控制的swiper2为1, 3, 5, 7。

By信息

类型:
string
默认:
slide
举例:
container
启用版本:
4.0.0

效果演示

slider1
slider2
slider3
Swiper1
slider1
slider2
slider3
slider4
slider5
Swiper2

使用方法示例

从Swiper7开始,容器默认类名由'.swiper-container'变更为'.swiper'。
<script> 
var Swiper2 = new Swiper('#swiper2');
var Swiper1 = new Swiper('#swiper1',{
  controller:{
    control: Swiper2,
    by: 'container',
  },
})
</script>