javascript - 滑动 slider - 拇指画廊与 SlideToClickedSlide 无法正常工作

Question

用于拇指库的新 Swiper API(v 4.4.1)工作出色，除了一个小功能 - slipToClickedSlide。我希望当我到达拇指视口(viewport)中的最后一张幻灯片时，图库将滑动到下一张幻灯片。

 var galleryThumbs = new Swiper('.gallery-thumbs', {
      spaceBetween: 10,
      slidesPerView: 4,
      watchSlidesVisibility: true,
      watchSlidesProgress: true,
      centerInsufficientSlides: true,
      slideToClickedSlide: true
 });
 var galleryTop = new Swiper('.gallery-top', {
      spaceBetween: 10,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      thumbs: {
        swiper: galleryThumbs
      }
 });

有人可以帮助我吗？ 链接至Fiddle

Answer 1

使用纯 JavaScript:

https://jsfiddle.net/sa7qwz25/171/

var galleryTop = new Swiper('.gallery-top', {
  ...
   on: {
    slideChange: function () {
      let activeIndex = this.activeIndex + 1;

      let activeSlide = document.querySelector(`.gallery-thumbs .swiper-slide:nth-child(${activeIndex})`);
      let nextSlide = document.querySelector(`.gallery-thumbs .swiper-slide:nth-child(${activeIndex + 1})`);
      let prevSlide = document.querySelector(`.gallery-thumbs .swiper-slide:nth-child(${activeIndex - 1})`);

      if (nextSlide && !nextSlide.classList.contains('swiper-slide-visible')) {
          this.thumbs.swiper.slideNext()    
      } else if (prevSlide && !prevSlide.classList.contains('swiper-slide-visible')) {
          this.thumbs.swiper.slidePrev()    
      }    
    }
  }
});