Синхронизация 2 ползунков Swiper

Question

У меня есть 2 ползунка на моей странице, один из которых вертикальный, а второй горизонтальный, вертикальный служит слайдером с миниатюрами, а горизонтальный отображает текущий слайд, соответствующий миниатюре. К сожалению, эти 2 слайдера не совсем синхронизируются c ... когда вы меняете слайд на горизонтальный, по вертикали отображается другое изображение как активное. Я подготовил демо на 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;