如何用拇指同步两个 swiper 滑块画廊？

如何解决如何用拇指同步两个 swiper 滑块画廊？

我为我的网站制作了一个复杂的画廊。我使用 Swiper Slider。

我有一些困难，因为我需要用拇指同步两个画廊。

如何用拇指同步两个 swiper 滑块画廊？

我使用 Swiper 滑块用拇指制作了两个画廊。

我试过了：

galleryThumbs.controller.control = galleryThumbs2;

但它不起作用。

可以用拇指同步两个画廊吗？

let galleryThumbs = new Swiper('.js-pg-thumbs',{
  slidesPerView: 4,});

let galleryTop = new Swiper('.js-pg-slides',{
  thumbs: {swiper: galleryThumbs},});

let galleryThumbs2 = new Swiper('.js-pg-thumbs2',});

let galleryTop2 = new Swiper('.js-pg-slides2',{
  thumbs: {swiper: galleryThumbs2},});

img {max-width:100%;}
.swiper-container {margin: 0 auto;overflow: hidden;width: 500px;}
.swiper-wrapper {position: relative;width: 100%;height: 100%;z-index: 1;display: flex;transition-property: transform;}
.swiper-slide {flex-shrink: 0;width: 100%;height: 300px;position: relative;transition-property: transform;}
.product-gallery__thumbs .swiper-wrapper {flex-wrap: wrap;transform: none!important;}
.product-gallery__thumbs .swiper-slide {border: solid 1px #ccc;width: 58px!important;height: 58px;margin: 0 4px 4px 0;}
.product-gallery__thumbs .swiper-slide-thumb-active {border-color: red;}

<div class="swiper-container product-gallery__slides js-pg-slides">
        <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="https://loremflickr.com/1200/960/girl/all?random=1" alt="" />
                    </div>
                    <div class="swiper-slide">
                        <img src="https://loremflickr.com/1200/960/girl/all?random=2" alt="" />
                    </div>
                    <div class="swiper-slide">
                        <img src="https://loremflickr.com/1200/960/girl/all?random=3" alt="" />
                    </div>
        </div>
    </div>

    <div class="swiper-container product-gallery__thumbs js-pg-thumbs">
            <div class="swiper-wrapper">
                     <div class="swiper-slide">
                        <img src="https://loremflickr.com/1200/960/girl/all?random=1" alt="" />
                    </div>
                    <div class="swiper-slide">
                        <img src="https://loremflickr.com/1200/960/girl/all?random=2" alt="" />
                    </div>
                    <div class="swiper-slide">
                        <img src="https://loremflickr.com/1200/960/girl/all?random=3" alt="" />
                    </div>
            </div>
    </div>
    
    <div class="swiper-container product-gallery__slides js-pg-slides2">
        <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="https://loremflickr.com/1200/960/girl/all?random=1" alt="" />
                    </div>
                    <div class="swiper-slide">
                        <img src="https://loremflickr.com/1200/960/girl/all?random=2" alt="" />
                    </div>
                    <div class="swiper-slide">
                        <img src="https://loremflickr.com/1200/960/girl/all?random=3" alt="" />
                    </div>
        </div>
    </div>

    <div class="swiper-container product-gallery__thumbs js-pg-thumbs2">
            <div class="swiper-wrapper">
                     <div class="swiper-slide">
                        <img src="https://loremflickr.com/1200/960/girl/all?random=1" alt="" />
                    </div>
                    <div class="swiper-slide">
                        <img src="https://loremflickr.com/1200/960/girl/all?random=2" alt="" />
                    </div>
                    <div class="swiper-slide">
                        <img src="https://loremflickr.com/1200/960/girl/all?random=3" alt="" />
                    </div>
            </div>
    </div>
    
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>