滑动拇指滑块不起作用

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;

视图如下：

行为方式： 当我拖动主滑块以更改幻灯片时，它也会更改，缩略图库幻灯片也会更改。但是单击缩略图库幻灯片不起作用。

因此，如果我单击拇指，它应该会更改主画廊的幻灯片，但不能那样工作。

我做错什么了吗？