jquery - 2 つの Swiper Slider Slideshow を同時にスクロール

Question

同時にスクロールする必要がある 2 つのスワイパー スライドショーがあります。これまでのところ機能しています。しかし、2 番目のスライドショーのスクロール方向を反転し、最初の自然な方向を維持したいと考えています。負の変換値を正にして、これを達成しようとしました。しかし、実際には機能していません...これまでに行ったことは次のとおりです。

コードペン: https://codepen.io/Dennisade/pen/eaRLZW

var numItems = $('.swiper-slide').length;

var imageSlider = new Swiper(".image-slider", {
  loopedSlides: numItems,
  loop: true,
  slidesPerView: "auto",
  freeMode: true,
  mousewheel: {
    releaseOnEdges: true,
  }
});

var overlay = new Swiper(".overlay", {
  loopedSlides: numItems,
  loop: true,
  slidesPerView: "auto",
  freeMode: true,
  reverseDirection: true,
  mousewheel: {
    releaseOnEdges: true,
    invert:true,
  },
});

imageSlider.on('setTranslate', function onSliderMove() {
  var scrollValue = this.translate;
  overlay.setTranslate(scrollValue);
});

.swiper-container,
.swiper-wrapper {
  height: 50vh;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: end;
  align-items: flex-end;
}

.swiper-wrapper {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: end;
  align-items: flex-end;
}

.swiper-slide {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: end;
  align-items: flex-end;
  width: auto;
}
.swiper-slide img {
  max-width: auto;
  max-height: 100%;
}

.thumbContainer img {
  display: block;
  max-width: auto;
  width:100%
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.css" rel="stylesheet"/>


<div class="image-text">Value</div>

<div class="swiper-container image-slider">

  <div class="swiper-wrapper overlay-wrapper">
   
    <div class="swiper-slide">
        <div class="thumbContainer">
          <img src="https://via.placeholder.com/560/FF0000/FFFFFF?Text=Down.com">
        </div>
    </div>
    
    <div class="swiper-slide">
        <div class="thumbContainer">
          <img src="https://via.placeholder.com/560/FF0000/FFFFFF?Text=Down.com">
        </div>
    </div>
    
    <div class="swiper-slide">
        <div class="thumbContainer">
          <img src="https://via.placeholder.com/560/FF0000/FFFFFF?Text=Down.com">
        </div>
    </div>
    
  </div>

</div>


<div class="swiper-container overlay">

  <div class="swiper-wrapper">
   
    <div class="swiper-slide">
        <div class="thumbContainer">
          <img src="https://via.placeholder.com/560/000000/FFFFFF?Text=Down.com">
        </div>
    </div>
    
     <div class="swiper-slide">
        <div class="thumbContainer">
          <img src="https://via.placeholder.com/560/000000/FFFFFF?Text=Down.com">
        </div>
    </div>
    
     <div class="swiper-slide">
        <div class="thumbContainer">
          <img src="https://via.placeholder.com/560/000000/FFFFFF?Text=Down.com">
        </div>
    </div>
    
  </div>

</div>






<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>