I have three different slider with different number of slide visible on each. How do I keep all three different swiper slider in sync? 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. 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? Think like sliderOne is thumbnails for both sliderTwo and sliderThree.

I have three different slider with different number of slide visible on each. How do I keep all three different swiper slider in sync? 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. 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? Think like sliderOne is thumbnails for both sliderTwo and sliderThree.

• javascript
• swiper.js

• What you're looking for is Observer pattern :) – Zyigh Commented Mar 29, 2019 at 12:59

2 Answers 2

You can pass array to controller.control

So final code will be

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

Link to the docs: Docs

You can redeclare the setTranslate & setTransition if sizes are the same:

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:

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