同步2个滑动器滑块

Question

我的页面上有2个滑块，一个是垂直滑块，第二个是水平滑块，垂直一个滑块用作缩略图，水平滑块显示与缩略图相对应的当前滑块。遗憾的是，这两个滑块没有完全同步...当您在水平滑块上更改幻灯片时，垂直滑块显示的图像处于活动状态。我在Codepen上准备了一个演示，演示了此确切问题。 https://codepen.io/mac_mac/pen/QWwmvdJ

var galleryTop = new Swiper('.gallery-top', {
              spaceBetween: 0,
              navigation: {
                nextEl: '.arrow-next',
                prevEl: '.arrow-prev',
              },
            });

            var galleryThumbs = new Swiper('.gallery-thumbs', {
              spaceBetween: 0,
              centeredSlides: false,
              slidesPerView: 'auto',
              direction: 'vertical',
              touchRatio: 0.2,
              slideToClickedSlide: true,
            });

            galleryTop.controller.control = galleryThumbs;
            galleryThumbs.controller.control = galleryTop;