单页多Swiper.js带缩略图导航滑块仅首个生效的解决需求

单页中使用多个带缩略图导航的Swiper.js滑块时，仅首个滑块可正常工作。参考过官网的缩略图画廊循环示例，也找到过无缩略图导航的多滑块实现方案，但带缩略图导航的实现存在困难，当前调试的代码效果不佳，希望找到无需重复添加类或复制大量JavaScript代码的通用解决方案。

单页单滑块时可正常运行的初始代码 #

var swiper = new Swiper(".mySwiper", {
  loop: false,
  spaceBetween: 10,
  slidesPerView: document.getElementsByClassName('swiper-slide').length / 2,
  freeMode: true,
  watchSlidesProgress: true,
});
var swiper2 = new Swiper(".mySwiper2", {
  loop: false,
  spaceBetween: 10,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  thumbs: {
    swiper: swiper,
  },
});

无缩略图导航的单页多滑块实现代码 #

// 声明Swiper相关类
const myCustomSlider = document.querySelectorAll('.swiper-container');

// 声明导航箭头类
const mySliderPrev = document.querySelectorAll('.swiper-button-prev');
const mySliderNext = document.querySelectorAll('.swiper-button-next');

for( i=0; i < myCustomSlider.length; i++ ) {
// 为每个Swiper滑块及导航箭头添加带序号的专属类
  myCustomSlider[i].classList.add('swiper-container-' + i);
  mySliderPrev[i].classList.add('swiper-button-prev-' + i);
  mySliderNext[i].classList.add('swiper-button-next-' + i);
  
  var slider = new Swiper ('.swiper-container', {
    effect: 'slide',
    
    pagination: {
      el: '.swiper-pagination',
    },
    
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    scrollbar: {
      el: '.swiper-scrollbar',
    },
  });
}

当前正在调试的带缩略图导航的多滑块代码 #

// 声明Swiper主滑块类
const myCustomSlider = document.querySelectorAll('.mySwiper2');

// 声明导航箭头类
const mySliderPrev = document.querySelectorAll('.swiper-button-prev');
const mySliderNext = document.querySelectorAll('.swiper-button-next');

for( i=0; i < myCustomSlider.length; i++ ) {
// 为每个主滑块及导航箭头添加带序号的专属类
  myCustomSlider[i].classList.add('mySwiper2-' + i);
  mySliderPrev[i].classList.add('swiper-button-prev-' + i);
  mySliderNext[i].classList.add('swiper-button-next-' + i);
  
  var swiper2 = new Swiper(".mySwiper2", {
    loop: false,
    spaceBetween: 10,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    thumbs: {
      swiper: swiper,
    },
  });
}

// 声明Swiper缩略图滑块类
const myCustomSliderThumbs = document.querySelectorAll('.mySwiper');

for( i=0; i < myCustomSliderThumbs.length; i++ ) {
// 为每个缩略图滑块添加带序号的专属类
  myCustomSliderThumbs[i].classList.add('mySwiper-' + i);

  var swiper = new Swiper(".mySwiper", {
    loop: false,
    spaceBetween: 10,
    slidesPerView: document.getElementsByClassName('swiper-slide').length / 2,
    freeMode: true,
    watchSlidesProgress: true,
  });
}

内容的提问来源于stack exchange，提问作者Johannes