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

Question

[newNoName]

Есть такой код

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>
  );

Как связать их вместе??

Comments

[Дмитрий Беляев]

Для кода есть тэг <code></code>

Answer 1

[Александр Макаров]

Вам подойдет https://swiperjs.com/react#thumbs