Есть 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;

Answer 1

Старый, но для протокола:

Вы должны использовать:box1.slideTo(box2.realIndex + 2);

Вы хотите сдвинуть box1 к box2 + 2.

realIndexвозвращает 0,1,2... иslideTo()занимает 1,2,3...

Вы также можете использоватьactiveIndexкоторый возвращает 1,2,3, но вы столкнетесь с проблемами, когда перейдете к последнему слайду + 1, а его там нет...