The new Swiper API (v 4.4.1) for the thumbs gallery work exelent, exept one small feature - slideToClickedSlide. I want to gallery will slide to the next slide when I get to the last slide in the the viewport of thumbs.

 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
      }
 });

Is the some one can help me? Link to the Fiddle

The new Swiper API (v 4.4.1) for the thumbs gallery work exelent, exept one small feature - slideToClickedSlide. I want to gallery will slide to the next slide when I get to the last slide in the the viewport of thumbs.

 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
      }
 });

Is the some one can help me? Link to the Fiddle

• javascript
• swiper.js

3 Answers 3

With plain JavaScript:

https://jsfiddle/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()    
      }    
    }
  }
});

I crate a function for this, you can trying, is better simple and you personalize your div with then you want, try:

//here you get your div(thumb) with data set
let swiperData = document.querySelectorAll('.myThumb');

//here i create a for to get my click and show my slider with my data
for(let i = 0, lgt = swiperData.length; i < lgt; i++) { 
    swiperData[i].onclick = function() { 
        var swiperGetData = swiperData[i].getAttribute('data-slide');
        mySwiper.slideTo(swiperGetData, 400);   

    }
}

If need to use more than one Swiper instance:

var galleryTop = new Swiper('.gallery-top', {
  ...
   on: {
    slideChange: function () {
      let activeIndex = this.activeIndex + 1;
      let nextSlide = this.thumbs.swiper.$el[0].querySelector(`.swiper-slide:nth-child(${activeIndex + 1})`);
      let prevSlide = this.thumbs.swiper.$el[0].querySelector(`.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()    
      }    
    }
  }
});