Should be something like this: ---js var galleryBottom = new Swiper('.gallery-bottom', { nextButton: ‘.swiper-button-next’, prevButton: ‘.swiper-button-prev’, spaceBetween: 10, grabCursor: true, effect: ‘fade’, onSlideChangeStart: function(s) { //link to current instance var x = s.activeIndex; galleryThumbs.slideTo(x, 700, false); //run without callbacks } }); var galleryThumbs = new Swiper('.gallery-thumbs', { spaceBetween: 10, grabCursor: true, slidesPerView: ‘auto’, slideToClickedSlide: true, onSlideChangeStart: function(s) { //link to current instance var x = s.activeIndex; galleryBottom.slideTo(x, 700, false); //run without callbacks } }); --- But note, that activeIndexes could be different in loop mode because of duplicated looped slides, so you should consider it
Thanks, Vladimir! Your code works great, but it still doesn't solve the looping issue. It might be due to the activeIndexes being different. Is there a different way to solve this problem without using activeIndex?
You may check the corresponding index by looking at data-Swiper-index attribute on slide. Or just do appropriate plus/minus on active index depending on number of looped slides