Swiper.js缩略图滑块最后一张后出现多余空白的解决问询

针对你遇到的缩略图Swiper切换到最后一张时出现多余空白、需要禁用对应导航的问题，可以通过监听Swiper的内置状态属性来精准控制导航按钮的启用状态，具体实现如下：

核心思路 #

利用Swiper实例的isBeginning（是否处于第一张幻灯片）和isEnd（是否处于最后一张完全显示状态）属性，在幻灯片切换和Swiper布局更新时，动态设置导航按钮的启用/禁用状态，避免不必要的滚动操作导致空白。

具体实现步骤 #

1. 保存缩略图Swiper实例
   在setThumbsSwiper函数中，将获取到的Swiper实例保存到变量中，方便后续调用：

   let thumbsSwiperInstance;
   function setThumbsSwiper(event) {
     thumbsSwiperInstance = event.detail[0];
     // 初始加载时立即检查导航状态
     updateThumbNavigationStatus();
   }
   

2. 编写导航状态控制函数
   这个函数会根据当前Swiper的状态，切换导航按钮的启用状态，同时可以添加样式标记方便用户识别：

   function updateThumbNavigationStatus() {
     if (!thumbsSwiperInstance) return;
     // 控制上一页按钮：处于第一张时禁用，否则启用
     const isFirstSlide = thumbsSwiperInstance.isBeginning;
     thumbsSwiperInstance.navigation.prevEl.disabled = isFirstSlide;
     isFirstSlide 
       ? thumbsSwiperInstance.navigation.prevEl.classList.add('swiper-button-disabled')
       : thumbsSwiperInstance.navigation.prevEl.classList.remove('swiper-button-disabled');
   
     // 控制下一页按钮：处于最后一张时禁用，否则启用
     const isLastSlide = thumbsSwiperInstance.isEnd;
     thumbsSwiperInstance.navigation.nextEl.disabled = isLastSlide;
     isLastSlide
       ? thumbsSwiperInstance.navigation.nextEl.classList.add('swiper-button-disabled')
       : thumbsSwiperInstance.navigation.nextEl.classList.remove('swiper-button-disabled');
   }
   

3. 绑定事件触发状态检查
   在缩略图Swiper的on:update和on:slideChange事件中调用上述函数，确保每次幻灯片切换或布局更新时同步导航状态：

   function thumbUpdate() {
     updateThumbNavigationStatus();
   }
   function thumbChange() {
     updateThumbNavigationStatus();
   }
   

为什么之前的方法无效？ #

• watchOverflow仅当幻灯片总宽度小于等于Swiper容器宽度时才会隐藏导航，但你的场景是幻灯片总宽度大于容器，只是最后一张可完全显示，因此该选项不适用。
• 通过offsetWidth和scrollWidth计算的方式容易忽略spaceBetween等配置的影响，而Swiper内置的isEnd属性已经处理了这些细节，判断更精准。

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