如何同步三个滑动滑块？

Question

我有三个不同的滑块，每个滑块上可见的幻灯片数量不同。如何使所有三个不同的滑动条滑块保持同步？我知道对于两个滑块我们可以做这样的事情：

sliderOne.controller.control = sliderTwo;
sliderTwo.controller.control = sliderOne;

我希望当有人更改 sliderOne 时也更改 sliderTwo 和 sliderThree，反之亦然。当我做这样的事情时：

sliderOne.controller.control = sliderTwo;
sliderTwo.controller.control = sliderOne;
sliderThree.controller.control = sliderOne;

sliderThree 能够 change/control sliderOne 但 sliderOne 只控制 sliderTwo 而不是 sliderTwo 和 sliderThree。

任何人都可以建议我如何通过 sliderOne 更改 sliderTwo 和 sliderThree 吗？认为 sliderOne 是 sliderTwo 和 sliderThree 的缩略图。

Answer 1

您可以将数组传递给 controller.control

所以最终代码将是

sliderOne.controller.control = [sliderTwo, sliderThree];

Link 到文档：Docs

Answer 2

如果尺寸相同，您可以重新声明 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);

或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);

如何同步三个滑动滑块？

How to sync three swiper slider?

javascript

swiper