滑动滑块时，滑动滑块不会更新滑块的活动状态

Question

由于某些原因，我必须使用Swiper Slider V4.5.3。我设置了一个轮播和内容滑块，但是单击轮播滑块项目时，它应该更改当前项目的活动状态，但不会。活动状态始终在第一项停止。

我尝试了多种方法来修复它，但是没有运气。即使添加slideChange事件以输出activeIndex值，它也始终显示为0。

希望任何人都能给我正确的方向。谢谢！

var Nav = new Swiper('#nav', {
  spaceBetween: 0,
  slidesPerView: 4,
  watchSlidesVisibility: true,
  watchSlidesProgress: true
});

var NavContent = new Swiper('#content', {
  spaceBetween: 20,
  thumbs: {
    swiper: Nav
  }
});

.swiper-slide-active {
  color: #f00;
}

.swiper-slide {
  cursor: pointer;
}

#content {
  margin-top: 2em;
}

<script src="https://nybilu.com/sources/swiper.min.js"></script>
<link href="https://nybilu.com/sources/swiper.min.css" rel="stylesheet" />

<div id="nav" class="swiper-container">
  <div class="swiper-wrapper">
     <div class="swiper-slide">Nav 1</div>
     <div class="swiper-slide">Nav 2</div>
     <div class="swiper-slide">Nav 3</div>
     <div class="swiper-slide">Nav 4</div>
     <div class="swiper-slide">Nav 5</div>
  </div>
</div>

<div id="content" class="swiper-container">
  <div class="swiper-wrapper">
     <div class="swiper-slide">Content 1</div>
     <div class="swiper-slide">content 2</div>
     <div class="swiper-slide">content 3</div>
     <div class="swiper-slide">content 4</div>
     <div class="swiper-slide">content 5</div>
  </div>
</div>