javascript - Swiper 拇指滑块不工作

Question

尝试创建将控制主画廊的缩略图画廊。我的代码是这样的：

import Swiper, { Controller, Thumbs } from "swiper";

Swiper.use([Controller, Thumbs]);
...
...

const galleryThumbsEl = this.el.shadowRoot.querySelector(".thumbs-gallery") as HTMLElement;
this.galleryThumbs = new Swiper(galleryThumbsEl, {
  direction: "vertical",
  spaceBetween: 6,
  slidesPerView: 4,
  slideToClickedSlide: true,
  watchSlidesVisibility: true,
  watchSlidesProgress: true,
});

const galleryMainEl = this.el.shadowRoot.querySelector(".main-gallery") as HTMLElement;
this.mainGallery = new Swiper(galleryMainEl, {
  slidesPerView: 1,
  slideToClickedSlide: true,
  thumbs: {
    swiper: this.galleryThumbs,
  },
});

this.mainGallery.controller.control = this.galleryThumbs;

视图如下所示：

它的行为方式： 当我拖动主滑块以更改幻灯片时，它会更改并且拇指画廊幻灯片也会更改。但点击拇指画廊幻灯片不起作用。

所以，如果我点击拇指，它应该改变主画廊的幻灯片，但它不是那样工作的。

我做错什么了吗？