Swiper 5.4.5 thumbs gallery 多個實例無法在同一頁面中工作

Question

Swiper 5.4.5 thumbs gallery 多個實例在同一頁面中不起作用 swiper 版本 5.4.5

var galleryThumbs = new Swiper('.gallery-thumbs', {
  spaceBetween: 10,
  slidesPerView: 4,
  loop: true,
  freeMode: true,
  loopedSlides: 5, //looped slides should be the same
  watchSlidesVisibility: true,
  watchSlidesProgress: true,
});
var galleryTop = new Swiper('.gallery-top', {
  spaceBetween: 10,
  loop: true,
  loopedSlides: 5, //looped slides should be the same
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  thumbs: {
    swiper: galleryThumbs,
  },
});    
    

Answer 1

/**
 * Multiple Swiper Slides
 * @require Swiper v4.X
 * @author palash chandra
 * @author website palashchandra.xyz
 */
const multipleSwiperSlides = function() {
    let sliderMain = document.querySelectorAll('.swiper-container.js-slider--main')
    let sliderNav = document.querySelectorAll('.swiper-container.js-slider--nav')

    let mainArray = [];
    let navArray = [];

    // Slider Main
    sliderMain.forEach(function(element, i) {
        // Push swiper instance to array
        mainArray.push(
            new Swiper(element, {
                loop: true,
                loopedSlides: 3,
            })
        );
    });

    // Slider Nav
    sliderNav.forEach(function(element, i) {
        var self = sliderNav;
        // Push swiper instance to array
        navArray.push(
            new Swiper(element, {
                slidesPerView: 3,
                loop: true,
                loopedSlides: 3,
                slideToClickedSlide: true,
                spaceBetween: 5,
                navigation: {
                    nextEl: self[i].querySelector('.swiper-button-next'),
                    prevEl: self[i].querySelector('.swiper-button-prev')
                }
            })
        );
    });

    const checkOnPage = function() {
        if (sliderMain.length > 0 && sliderNav.length > 0) {
            let numberOfSlides = mainArray.length || navArray.length || 0;

            if (mainArray.length !== navArray.length) {
                console.warn('multipleSwiperSlides: Number of main slides and nav slides is different. Expect incorrect behaviour.');
            }

            for (let i = 0; i < numberOfSlides; i++) {
                mainArray[i].controller.control = navArray[i];
                navArray[i].controller.control = mainArray[i];
            }

            console.log('multipleSwiperSlides: Things should be working fine. B)');
        }
    }

    checkOnPage();
}

multipleSwiperSlides();