How to connect 2 swiper react so that when you click on a button in one slider, the picture in the second slider also changes?

Question

JavaScript

There is such a code

const [firstSwiper, setFirstSwiper] = useState(null);
  const [secondSwiper, setSecondSwiper] = useState(null);
  return (
    <div className={styles.foto}>
      <div className={styles.wrapper}>
        <Swiper
          modules={[Controller]}
          onSwiper={setFirstSwiper}
          controller={{ control: secondSwiper }}
          navigation
          spaceBetween={50}
          slidesPerView={1}
        >
          {card.images.map((item) => (
            <SwiperSlide key={item.url}>
              <img
                src={...}
              />
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
      <div className={styles.container}>
        <Swiper
          modules={[Controller]}
          onSwiper={setSecondSwiper}
          controller={{ control: firstSwiper }}
          navigation
          spaceBetween={50}
          slidesPerView={1}
        >
          {card.images.map((item) => (
            <SwiperSlide c key={item.url}>
              <img
                src={...}
                
              />
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
    </div>
  );

How to link them together??

Answer 1

https://swiperjs.com/react#thumbs will do for you