为什么双向 Swiper JS 控件不起作用？

如何解决为什么双向 Swiper JS 控件不起作用？

我无法在 2 个 Swipers 之间进行任何类型的控制，但是它们按预期呈现，只是没有工作控制器功能。已提出类似问题但尚未回答here

我想获得双向控制，其中在 2 个 Swiper 中的任何一个上向任一方向滑动会导致在另一个 Swiper 上的等效滑动。我的代码如下：

import React,{ useState } from 'react';
import SwiperCore,{ Controller } from 'swiper';
import { Swiper,SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/swiper.scss';
import 'swiper/components/controller/controller.scss';

import './styles.css';

// install Swiper's Controller component
SwiperCore.use([Controller]);

const App = () => {
  // store swiper instances
  const [firstSwiper,setFirstSwiper] = useState(null);
  const [secondSwiper,setSecondSwiper] = useState(null);

  const slides = [];
  for (let i = 0; i < 5; i += 1) {
    slides.push(
      <SwiperSlide key={`slide-${i}`}>
        <img
          src={`https://picsum.photos/id/${i + 1}/500/300`}
          style={{ listStyle: 'none' }}
          alt={`Slide ${i}`}
        />
      </SwiperSlide>
    );
  }

  const slides2 = [];
  for (let i = 9; i < 14; i += 1) {
    slides2.push(
      <SwiperSlide key={`slide-${i}`}>
        <img
          src={`https://picsum.photos/id/${i + 1}/500/300`}
          style={{ listStyle: 'none' }}
          alt={`Slide ${i}`}
        />
      </SwiperSlide>
    );
  }

  return (
    <>
      <Swiper
        onSwiper={setFirstSwiper}
        controller={{ control: secondSwiper }}
        slidesPerView={1}>

        {slides}
      </Swiper>

      <Swiper
        onSwiper={setSecondSwiper}
        controller={{ control: firstSwiper }}
        slidesPerView={1}>

        {slides2}
      </Swiper>
    </>
  );
};

export default App;

非常感谢任何帮助！

解决方法

以防其他人遇到这种情况，并且只是使用 Vanilla JS：
请参阅：https://swiperjs.com/swiper-api
具体：

控制器方法 属性 swiper.controller.control Swiper

在这里传递另一个 Swiper 实例或带有 Swiper 实例的数组 应该由这个 Swiper 控制

firstSwiper.controller.control = secondSwiper;  
secondSwiper.controller.control = firstSwiper;

将是双向控制的适当语法。

,

显然代码没有问题，而是控制器实现原样在版本 swiper@6.4.5 上不起作用，我已经在早期版本 swiper@6.0.2 上对其进行了测试，并且工作正常。