swiper虚拟slide 错位

Question

按照swiper中文网的virtual slide的使用方法示例

<div class="swiper-container">
    <div class="swiper-wrapper"></div>
</div>
<script>
var mySwiper = new Swiper('.swiper-container', {
  virtual: {
    slides: (function () {
      var slides = [];
      for (var i = 0; i < 600; i += 1) {
        slides.push('Slide ' + (i + 1));
      }
      return slides;
    }()),
  },
  //或者 virtual: true,
});
</script>

var that = this;
  let swiper = new Swiper(".swiper-container", {
    direction: "vertical",
    virtual: {
      slides: (function() {
        return that.hotsowing;
      })(),
      renderSlide(slide,index){
        console.log(index);
        return `<div
            class="swiper-slide"
          >
          <!-- ${slide.userName} -->
          <video
              src="${slide.viewUrl}"
              type="video/mp4"
            >
            </video>
          </div>`
      }
    },
    on: {
      slideChange() {
        that.index = swiper.realIndex;
      }
    }
  });

然后奇怪的事情就发生了

swiper不会按照虚拟slide去显示，而是按照未虚拟前的逻辑，展示slide的下标

也就是如图中所示slide的真实下标变到了2，然后它会展示swiper-wrapper下的第三个children

有没有人知道这种情况应该如何解决？