通过保存Swiper实例

Question

Tsx版Swiper于2020年夏季发布。重复官方文档的例子，滑块断裂--甚至连样式都无法工作。

主要任务是向滑块中添加拇指并将其链接起来。这意味着您需要安装控制器和拇指模块，然后使用onSwiper方法指定谁被附加到谁。

因此，我们期望这个结果(这里没有任何相互绑定)：预期截图

但是我们得到了这个：不正确的截图

它们之间的唯一区别是，在工作版本中，我不调用onSwipe={setMainSwiper}和onSwipe={setThumbSwiper}，其中set_Name_Slider是useState()钩子。当然，错误的版本根本不起作用。

代码示例：

import SwiperCore, { Autoplay, Controller, Lazy, Thumbs } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperClass from 'swiper/types/swiper-class';

SwiperCore.use([Autoplay, Controller, Lazy, Thumbs]);

...

const [mainSwiper, setMainSwiper] = useState<SwiperClass>();
const [thumbsSwiper, setThumbsSwiper] = useState<SwiperClass>();

...

<Swiper
  spaceBetween={0}
  slidesPerView={1}
  preloadImages={false}
  onSwiper={setMainSwiper}
  thumbs={{ swiper: thumbsSwiper }}
  controller={{ control: thumbsSwiper }}
  autoplay
  loop
  lazy
>
  {state?.Images.map(image => (
    <SwiperSlide key={uniqid()} className={styles.medium}>
      {getSlide('medium', image.Medium)}
    </SwiperSlide>
  ))}
</Swiper>

<Swiper
  spaceBetween={3}
  slidesPerView={5}
  preloadImages={false}
  onSwiper={setThumbsSwiper}
  controller={{ control: mainSwiper }}
  slideToClickedSlide
  watchSlidesVisibility
  watchSlidesProgress
  lazy
>
  {state?.Images.map(image => (
    <SwiperSlide key={uniqid()} className={styles.small}>
      {getSlide('small', image.Small)}
    </SwiperSlide>
  ))}
</Swiper>

并从正式文件：

import SwiperCore, { Thumbs } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';

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

const App = () => {
  // store thumbs swiper instance
  const [thumbsSwiper, setThumbsSwiper] = useState(null);

  return (
    <main>
      {/* Main Swiper -> pass thumbs swiper instance */}
      <Swiper thumbs={{ swiper: thumbsSwiper }} ...>
        {/* ... */}
      </Swiper>

      {/* Thumbs Swiper -> store swiper instance */}
      {/* It is also required to set watchSlidesVisibility and watchSlidesProgress props */ }
      <Swiper
        onSwiper={setThumbsSwiper}
        watchSlidesVisibility
        watchSlidesProgress
        ...
      >
        {/* ... */}
      </Swiper>
    </main>
  )
}

Answer 1

我也遇到了同样的问题，试图更改您的代码。

const [thumbsSwiper, setThumbsSwiper] = useState(null);

至：

const [thumbsSwiper, setThumbsSwiper] = useState<SwiperCore>();