2つのswiperスライドの切り替えタイミングがずれていく

Question

左右に2つ縦切り替えのスライドを並べています。
左スライドは下から上へ流れ、
右スライドは上から下へ流れるようリバースをかけています。

スライド開始時はタイミングもピッタリ合っているのに
時間が経つにつれて、少しづつ左右の切替えタイミングがズレていきます。
最終的には、スライド1枚分くらいズレてしまいます。

これをズレることなく、ずっと同じタイミングで切り替わるようにしたいです。
解決策やヒントなどございましたらご教授いただけると幸いです。
宜しくお願いいたします。

下記は動作サンプルです
・swiper使用
・スライド切り替えの設定は左右同じ
https://codepen.io/water333/pen/VwWGdGY

mySwiper2.controller.control = mySwiper;等は試しましたがうまくいきませんでした。
IE11対応が必要なためswiperは4系を使用しています。

<div id="sliderWrap">
	<div class="swiper-container slide_left">
		<div class="swiper-wrapper">
		    <div class="swiper-slide"><img src="https://office333.xsrv.jp/sampleimages/sample1.png" alt=""></div>
		    <div class="swiper-slide"><img src="https://office333.xsrv.jp/sampleimages/sample2.png" alt=""></div>
		    <div class="swiper-slide"><img src="https://office333.xsrv.jp/sampleimages/sample3.png" alt=""></div>
		</div>
	</div>
	<div class="swiper-container slide_right">
		<div class="swiper-wrapper">
		    <div class="swiper-slide"><img src="https://office333.xsrv.jp/sampleimages/sample4.png" alt=""></div>
		    <div class="swiper-slide"><img src="https://office333.xsrv.jp/sampleimages/sample5.png" alt=""></div>
		    <div class="swiper-slide"><img src="https://office333.xsrv.jp/sampleimages/sample6.png" alt=""></div>
		</div>
	</div>
</div>

var mySwiper = new Swiper ('.slide_left', {
	direction: 'vertical', //スライド切り替えを縦に変更
	effect: 'slide',
	speed: 800,
	slidesPerView: 1,
	loop: true,
	loopedSlides: 1,
	autoplay: {
	   delay: 2000,
	},
})
	
var mySwiper2 = new Swiper ('.slide_right', {
	direction: 'vertical', //スライド切り替えを縦に変更
	effect: 'slide',
	speed: 800,
	slidesPerView: 1,
	loop: true,
	loopedSlides: 1,
	autoplay: {
	   delay: 2000,
	   reverseDirection: true, //方向を上から下へ変更
	},
}) 

Answer 1

controller オプションを使って動きを連動するのはどうですか？

2つのSwiperを連動させるには、controllerを使います。| サンプル付き！簡単にスライドを作れるライブラリSwiper.js超解説（基礎編） | ガリガリコード

Comments

[watermusic]

回答ありがとうございました！

controller オプションはすでに試していたのですが、
教えていただいたサイトでは、私の試し方と少し違う書き方をしている部分があり、
そちらで再度色々とやってみたところ、
左右の動きを逆にするには、autoplayのreverseDirectionを消してcontrollerのinverseを有効にするなど、細かなと変更は必要でしたが、うまくいきました！
本当に助かりました。ありがとうございました！

[Lhankor_Mhy]

おお、すでにお試しだったのですね。よく読まずに失礼しました。
ご解決されて何よりです。

[watermusic]

とんでもないです、本当に助かりました！
重ねてありがとうございましたm(__)m

Answer 2

Lhankor_Mhyさんからの回答をもとに調整した
成功コードを残しておきます。

mySwiper2に下記の変更を加えました。

①autoplayのreverseDirection: trueで
スライド切替を上から下へ逆向き制御していた設定をOFFに変更。

②追加したcontrollerで、inverseをtrueにする事で①でOFFにした
上から下への逆向き制御を追加。
byをslideにしてスライド単位で連動を制御するよう設定。

以上で希望通りの動作になりました◎

var mySwiper = new Swiper ('.slide_left', {
	direction: 'vertical',
	effect: 'slide',
	speed: 800,
	slidesPerView: 1,
	loop: true,
	loopedSlides: 1,
	autoplay: {
	   delay: 2000,
	},
})
	
var mySwiper2 = new Swiper ('.slide_right', {
	direction: 'vertical',
	effect: 'slide',
	speed: 800,
	slidesPerView: 1,
	loop: true,
	loopedSlides: 1,
	autoplay: {
	delay: 2000,
	    //reverseDirection: true,
	},
	controller: {
	    control: mySwiper,
	    inverse: true,
	    by: 'slide'
	},
})