Swiper: How do I get two swiper instances to control each other?

[magician11]

I see it's easy enough to get one controller to control another.

    var quoteSwiper = new Swiper('.quote-slider');

    var imageSwiper = new Swiper('.image-slider', {
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
      control: quoteSwiper
    });
  });

But how do I get swipes made on quoteSwiper to control imageSwiper? i.e. swiping the text makes the images swipe?

I have a codepen illustrating this here.

I tried

    var quoteSwiper = new Swiper('.quote-slider', {
      control: imageSwiper
    });

and

quoteSwiper.params.control = imageSwiper;
quoteSwiper.reInit();

and neither seemed to work.

Thanks.

[ranmacar]

http://codepen.io/anon/pen/JKYxKJ?editors=0010

[magician11]

Thank you!

The key to the solution by @ranmacar is to set the control params outside of creating a new instance.

    var quoteSwiper = new Swiper('.quote-slider');

    var imageSwiper = new Swiper('.image-slider', {
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
    });

    quoteSwiper.params.control = imageSwiper;
    imageSwiper.params.control = quoteSwiper;

[KapSSe]

Also if problem occurs in version 4 of swiper, change your code like this:

quoteSwiper.controller.control = imageSwiper;

instead of

quoteSwiper.params.control = imageSwiper;

So the whole solution will be like:

let quoteSwiper = new Swiper('.quote-slider');

let imageSwiper = new Swiper('.image-slider', {
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
    });

    quoteSwiper.controller.control = imageSwiper;
    imageSwiper.controller.control = quoteSwiper;

[lichenhao]

The same problem occurs with 4.2.2 for me.

[jordan-webdev]

I can confirm that @KapSSe 's solution works even if the two separate sliders each have individual sets of nav buttons, rather than the single nav controller for both slides, as showed in @ranmacar 's example.

It looks like, according to the docs, you can even pass an array, so in theory we could even do this with 3 or more sliders if we wanted to...wow!

http://idangero.us/swiper/api/#controller

Great plugin!

[jehadja]

resolved ! 👍
test on 4.2 - 4.6
if you select swiper by class not ID
the you need to put [0] example

   var galleryTop = new Swiper('.gallery-top', {
            spaceBetween: 10,
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
          });
          var galleryThumbs = new Swiper('.gallery-thumbs', {
            spaceBetween: 10,
            centeredSlides: true,
            slidesPerView: 'auto',
            touchRatio: 0.2,
            slideToClickedSlide: true,
          });


        galleryTop[0].controller.control = galleryThumbs;
        galleryThumbs[0].controller.control =galleryTop;