javascript - 同步了 2 个 Swiper JS，但需要第二个滑块来显示当前幻灯片 +1

Question

我有两个同步的 Swiper JS 实例并且工作正常，但我需要第二个滑块来显示当前幻灯片 +1。

所以两个滑块是同步的，第二个滑块显示第一个滑块的 +1 幻灯片。

当然，两个滑块都是环形的。

import Swiper from 'swiper';

const BoxCarousel = $el => {
  const box1 = new Swiper('.swiper-container-box-1', {
    direction: 'horizontal',
    loop: true,
    speed: 1000,
    grabCursor: true,
    watchSlidesProgress: true,
    mousewheelControl: true,
    keyboardControl: true,
  });

  const box2 = new Swiper('.swiper-container-box-2', {
    direction: 'horizontal',
    loop: true,
    speed: 1000,
    grabCursor: true,
    watchSlidesProgress: true,
    mousewheelControl: true,
    keyboardControl: true,
    initialSlide: 1, // OK at start but then syncs after first click
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    // slideChangeTransitionEnd: {
    //   mySwiper.slideTo(index, speed, runCallbacks);
    // },
  });

  box2.on('slideChange', () => {
    //box2.slideTo(box2.realIndex + 1);
  });

  //console.log(box2);

  box1.controller.control = box2;
  box2.controller.control = box1;
};

export default BoxCarousel;