Swiper JS仅2个幻灯片重复显示及导航控制问题咨询

问题原因 #

1. 幻灯片重复：你启用了loopFillGroupWithBlank: true但未开启loop，该属性仅用于循环模式下补全分组空白，无循环时开启会导致Swiper自动重复幻灯片以填满slidesPerView的数量（比如设置了slidesPerView:3，只有2张幻灯片时会重复第一张凑数）。
2. 导航按钮未按需隐藏：原代码未根据幻灯片数量判断导航按钮的显示状态。
3. loopDestroy后的空白：销毁循环后loopFillGroupWithBlank仍处于启用状态，导致补全的空白区域残留。

修复代码 #

// 提前获取幻灯片总数
const totalSlides = document.querySelectorAll('.project-details-swiper .swiper-slide').length;

const swiperproject = new Swiper(".project-details-swiper", {
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
    },
    slidesPerView: 3,
    spaceBetween: 30,
    slidesPerGroup: 1,
    // 关闭循环补全属性，彻底解决重复/空白问题
    loopFillGroupWithBlank: false,
    // 初始化及滑动时控制导航显示
    on: {
      init() {
        this.toggleNav();
      },
      slideChange() {
        this.toggleNav();
      }
    }
});

// 扩展Swiper实例的导航控制方法
Swiper.prototype.toggleNav = function() {
  const shouldHide = this.slides.length <= 3;
  this.navigation.nextEl.style.display = shouldHide ? 'none' : 'block';
  this.navigation.prevEl.style.display = shouldHide ? 'none' : 'block';
};

关键修复点 #

• 关闭loopFillGroupWithBlank：该属性仅在loop: true时有用，无循环时开启会引发幻灯片重复或空白，直接设为false即可解决核心问题。
• 动态控制导航按钮：通过init和slideChange事件，根据幻灯片数量判断是否隐藏导航按钮，确保≤3张时不显示按钮。
• 无需使用loopDestroy()：从一开始就不启用循环相关属性，避免销毁循环后出现的残留问题。

补充说明 #

• 确保所有幻灯片都带有.swiper-slide类，否则幻灯片数量统计会出错。
• 若幻灯片是动态生成的（如异步加载后添加），需在生成完成后调用swiperproject.update()更新实例，再执行swiperproject.toggleNav()。

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