javascript - How to sync three swiper slider? - Stack Overflow

admin管理员组

文章数量:1335357

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

Share Improve this question Follow asked Mar 29, 2019 at 12:53 Abhishek RajAbhishek Raj 10711 gold badge33 silver badges1010 bronze badges 1

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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

本文标签： javascriptHow to sync three swiper sliderStack Overflow