如何获取SwiperJS中slidesPerView对应的首尾缩略图索引？

你可以通过Swiper实例的内置属性和事件来获取当前可见的首尾缩略图索引，以下是两种可靠的实现方式：

方法一：利用visibleSlides属性（推荐） #

Swiper会自动维护一个visibleSlides数组，存储当前实际可见的所有slide元素，直接取数组首尾元素的swiperSlideIndex即可得到索引：

// 初始化缩略图Swiper
const thumbSwiper = new Swiper('.thumb-swiper', {
  slidesPerView: 5,
  spaceBetween: 10,
  // 绑定初始化和滑动切换事件
  on: {
    init() {
      this.getVisibleRange();
    },
    slideChange() {
      this.getVisibleRange();
    }
  }
});

// 扩展方法获取可见范围
Swiper.prototype.getVisibleRange = function() {
  const visibleSlides = this.visibleSlides;
  if (!visibleSlides.length) return;
  
  const firstVisibleIndex = visibleSlides[0].swiperSlideIndex;
  const lastVisibleIndex = visibleSlides[visibleSlides.length - 1].swiperSlideIndex;
  
  console.log('首个可见缩略图索引:', firstVisibleIndex);
  console.log('最后一个可见缩略图索引:', lastVisibleIndex);
  // 这里可以把索引用于你的业务逻辑，比如高亮、同步等
};

这个方法的优势是精准适配所有场景，包括自定义slide宽度、设置spaceBetween、甚至开启loop模式时，都能正确获取原始slide的索引（而非克隆的slide）。

方法二：通过activeIndex计算（无loop场景适用） #

如果你的缩略图滑块没有开启loop模式，且所有slide宽度一致，可以直接通过activeIndex结合slidesPerView计算，注意处理最后一组不足slidesPerView的边界情况：

const thumbSwiper = new Swiper('.thumb-swiper', {
  slidesPerView: 5,
  loop: false,
  on: {
    init() {
      const firstIndex = this.activeIndex;
      let lastIndex = this.activeIndex + this.slidesPerView - 1;
      // 修正最后一组的索引
      lastIndex = lastIndex >= this.slides.length ? this.slides.length - 1 : lastIndex;
      
      console.log('首个可见索引:', firstIndex, '最后一个可见索引:', lastIndex);
    },
    slideChange() {
      // 同init逻辑，重复代码可以封装成函数
      const firstIndex = this.activeIndex;
      let lastIndex = this.activeIndex + this.slidesPerView - 1;
      lastIndex = lastIndex >= this.slides.length ? this.slides.length - 1 : lastIndex;
      
      console.log('首个可见索引:', firstIndex, '最后一个可见索引:', lastIndex);
    }
  }
});

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