[英]How to sync three swiper slider?
I have three different slider with different number of slide visible on each.我有三个不同的滑块,每个滑块上可见的幻灯片数量不同。 How do I keep all three different swiper slider in sync?
如何让所有三个不同的 swiper 滑块保持同步? I do know for two slider we can do something like this:
我知道对于两个滑块我们可以做这样的事情:
sliderOne.controller.control = sliderTwo;
sliderTwo.controller.control = sliderOne;
I want when someone change sliderOne to change sliderTwo and sliderThree also and vice-versa.我希望当有人更改 sliderOne 时也更改 sliderTwo 和 sliderThree,反之亦然。 When I do something like this:
当我做这样的事情时:
sliderOne.controller.control = sliderTwo;
sliderTwo.controller.control = sliderOne;
sliderThree.controller.control = sliderOne;
sliderThree is able to change/control sliderOne but sliderOne is only controlling sliderTwo not both sliderTwo and sliderThree.滑块三能够改变/控制滑块一但滑块一只控制滑块二而不是滑块二和滑块三。
Can anyone suggest me how to change sliderTwo and sliderThree both through sliderOne?谁能建议我如何通过sliderOne更改sliderTwo和sliderThree? Think like sliderOne is thumbnails for both sliderTwo and sliderThree.
像sliderOne 一样是sliderTwo 和sliderThree 的缩略图。
You can redeclare the setTranslate
& setTransition
if sizes are the same:如果大小相同,您可以重新声明
setTranslate
和setTransition
:
function bindSwipers(...swiperList) {
for (const swiper of swiperList) {
swiper.setTranslate = function(translate, byController, doNotPropagate){
if (doNotPropagate) {
Swiper.prototype.setTranslate.apply(this, arguments);
} else {
for (const swiper of swiperList) {
swiper.setTranslate(translate, byController, true);
}
}
};
swiper.setTransition = function(duration, byController, doNotPropagate){
if (doNotPropagate) {
Swiper.prototype.setTransition.apply(this, arguments);
} else {
for (const swiper of swiperList) {
swiper.setTransition(duration, byController, true);
}
}
};
}
}
bindSwipers(sliderOne, sliderTwo, sliderThree);
or slideTo
:或
slideTo
:
function bindSwipers(...swiperList) {
for (const swiper of swiperList) {
swiper.slideTo = function(index, speed, runCallbacks, doNotPropagate){
if (doNotPropagate) {
Swiper.prototype.slideTo.apply(this, arguments);
} else {
for (const swiper of swiperList) {
swiper.slideTo(index, speed, runCallbacks, true);
}
}
};
}
}
bindSwipers(sliderOne, sliderTwo, sliderThree);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.