SwiperJS缩略图组件滚动超出最后一页问题及解决方案

我开发了一个底部带缩略图的SwiperJS组件，为了在页面中容纳更多缩略图，限制了swiper-slide及其内部图片的宽高，但出现了缩略图swiper可以滚动到最后一页之外的问题。

经过调试和参考建议，总结出两个可行的解决方法：

• 在HTML中初始化slides-per-view为极大值（比如1000）：给缩略图对应的swiper-container设置slides-per-view="1000"，让Swiper能够正确计算所有缩略图的总宽度，避免出现滚动到最后一页之外的空白区域。
• 根据屏幕宽度和缩略图尺寸动态更新slides-per-view：通过屏幕宽度、根元素字体大小（转换rem为px）以及缩略图的实际尺寸，计算当前屏幕能容纳的缩略图数量，再动态设置Swiper的slides-per-view属性。以Angular项目为例，可在组件的ngAfterViewInit钩子中实现：

ngAfterViewInit() {
  const swiperEl = document.querySelector('swiper-container.thumbnail-swiper');
  const width = screen.width;
  const remToPxFactor = parseFloat(getComputedStyle(document.documentElement).fontSize);
  // 公式中的2为缩略图的margin值，1.5rem为缩略图的宽高，需根据实际样式调整
  const slidesPerView = Math.floor(width / (2 + 1.5 * remToPxFactor));
  swiperEl!.setAttribute('slides-per-view', String(slidesPerView));
}

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