Как сделать, чтобы при клике на кнопку, у второго слайдера активным становился тот же слайд, что и в первом слайдере swiper?

Question

[z_u_l]

Есть два одинаковых связанных слайдера на странице. Нужно сделать, чтобы при клике на кнопку "Установить у второго слайдера слайд, который соответствует индексу в первом слайдере", у второго связанного слайдера активным становился тот же слайд, что и в первом связанном слайдере. Т.е., например, пролистнули первый вязанный слайдер до последнего элемента, нажали кнопку "Установить у второго слайдера слайд, который соответствует индексу в первом слайдере", и во втором связанном слайде активным должен стать последний слайд.

Ссылка на пример

Answer 1

[0xD34F]

function initSlider(el) {
  if (!(el instanceof HTMLElement)) {
    el = document.querySelector(el);
  }

  const slider = new Swiper(el.querySelector('.product-slider'), {
    navigation: {
      nextEl: el.querySelector('.swiper-button-next'),
      prevEl: el.querySelector('.swiper-button-prev'),
    },
    spaceBetween: 10,
  });

  const thumbs = new Swiper(el.querySelector('.product-thumbs'), {
    spaceBetween: 5,
    centeredSlides: true,
    slidesPerView: 4,
    touchRatio: 0.2,
    slideToClickedSlide: true,
    direction: 'vertical',
  });

  slider.controller.control = thumbs;
  thumbs.controller.control = slider;

  return { slider, thumbs };
}


const
  first = initSlider('.container-first'),
  second = initSlider('.container-second');

document.querySelector('.set-slide').addEventListener('click', () => {
  second.slider.slideTo(first.slider.realIndex);
});

Answer 2

[inkShio]

Используй это

mySwiper.slideTo(index, speed, runCallbacks);

https://swiperjs.com/api/#methods