Swiper 8.4.5交互需求：点击缩略图联动主滑块，滑动不联动

要实现触摸滑动缩略图时主滑块不联动，仅点击缩略图切换主滑块，同时保留缩略图的自由滑动（free mode），针对Swiper 8.4.5版本，可按以下方式修改代码：

核心调整思路 #

1. 移除原有的控制器联动配置（避免滑动时双向同步）
2. 给缩略图滑块开启freeMode模式
3. 通过监听缩略图的点击事件，主动触发主滑块切换到对应内容

修改后的完整代码 #

var galleryThumbs = new Swiper('.gallery-thumbs', {
  loop: true,
  loopedSlides: 10,
  centeredSlides: true,
  spaceBetween: 10,
  slideToClickedSlide: true,
  slidesPerView: 5,
  watchSlidesVisibility: true,
  watchSlidesProgress: true,
  freeMode: true // 开启自由滑动模式，保留需求特性
});

var galleryTop = new Swiper('.gallery-top', {
  loop: true,
  loopedSlides: 10,
  spaceBetween: 10,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
});

// 监听缩略图点击，触发主滑块切换
galleryThumbs.on('click', function() {
  if (typeof this.clickedIndex === 'number') {
    // loop模式下用slideToLoop确保切换到真实对应索引的内容
    galleryTop.slideToLoop(this.clickedIndex);
  }
});

关键说明 #

• 移除控制器联动：原代码中的galleryTop.controller.control = galleryThumbs会导致主滑块滑动时缩略图联动，若开启反向联动还会让缩略图滑动时带动主滑块，完全不符合需求，因此必须删除该配置。
• slideToLoop的作用：因为两个滑块都启用了loop模式，slideToLoop会基于原始slide的真实索引进行切换，避免loop生成的虚拟slide导致索引混乱。
• 保留自由滑动：通过freeMode: true让缩略图滑块可以随意滑动，不会强制吸附到固定的slide位置，满足需求要求。

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