如何为fsLightbox灯箱插件添加自定义上/下页切换按钮

你当前采用自定义内联内容源的实现方向是对的，不需要修改插件源码，直接调用插件实例暴露的公开方法即可完成切换逻辑，不需要硬编码每个按钮的跳转和文本。

核心实现逻辑 #

fsLightbox 初始化后会暴露三个核心能力，足够支撑自定义导航需求：

• 可读写的slideIndex属性，标识当前展示的幻灯片索引（从0开始计数）
• 公开方法goToSlide(targetIndex)，可直接跳转到指定索引的幻灯片
• 生命周期钩子onOpen、onSlideChange，可在灯箱打开、幻灯片切换完成时触发自定义逻辑

具体实现代码 #

1. 调整HTML结构 #

给每个灯箱触发器加data-slide-name属性存储幻灯片显示名称，自定义内容里的导航按钮不要写死文本和内联点击事件：

<!-- 灯箱触发器 -->
<a data-fslightbox="partners" data-class="partner" data-slide-name="First Partner" href="#FirstPartner">
  <img src="FirstPartner.jpg" />
</a>
<a data-fslightbox="partners" data-class="partner" data-slide-name="Second Partner" href="#SecondPartner">
  <img src="SecondPartner.jpg" />
</a>

<!-- 自定义内联内容源 -->
<div class="display-none">
  <div id="FirstPartner">
    <div class="copy-container">
      Some copy
    </div>
    <div class="navigation-container">
      <button class="custom-prev-btn" style="display: none;">
        <span class="prev-name"></span> &lt;&lt;
      </button>
      <button class="custom-next-btn">
        <span class="next-name"></span> &gt;&gt;
      </button>
    </div>
  </div>
  <div id="SecondPartner">
     <div class="copy-container">
      Some copy
    </div>
    <div class="navigation-container">
      <button class="custom-prev-btn">
        <span class="prev-name"></span> &lt;&lt;
      </button>
      <button class="custom-next-btn" style="display: none;">
        <span class="next-name"></span> &gt;&gt;
      </button>
    </div>
  </div>
</div>

2. 编写JS逻辑 #

不要写全局的NextSlide()/PrevSlide()函数，统一通过实例方法控制切换，自动更新按钮文本和显示状态：

document.addEventListener('DOMContentLoaded', () => {
  const triggers = Array.from(document.querySelectorAll('[data-fslightbox="partners"]'));
  const slideNames = triggers.map(item => item.dataset.slideName);
  const totalSlides = triggers.length;

  // 初始化灯箱实例
  const partnersLightbox = new FsLightbox();
  partnersLightbox.props.sources = triggers;

  // 绑定触发器点击打开逻辑
  triggers.forEach((trigger, index) => {
    trigger.addEventListener('click', (e) => {
      e.preventDefault();
      partnersLightbox.open(index);
    });
  });

  // 灯箱打开、幻灯片切换时更新自定义按钮状态
  partnersLightbox.props.onOpen = () => updateNavStatus(partnersLightbox, slideNames, totalSlides);
  partnersLightbox.props.onSlideChange = () => updateNavStatus(partnersLightbox, slideNames, totalSlides);

  // 通过事件委托绑定自定义按钮点击逻辑
  document.addEventListener('click', (e) => {
    if (e.target.closest('.custom-prev-btn')) {
      partnersLightbox.goToSlide(partnersLightbox.slideIndex - 1);
    }
    if (e.target.closest('.custom-next-btn')) {
      partnersLightbox.goToSlide(partnersLightbox.slideIndex + 1);
    }
  })
})

// 统一更新自定义导航的显示、文本
function updateNavStatus(lightbox, nameList, total) {
  const currentIndex = lightbox.slideIndex;
  const currentSlideNav = document.querySelector('.fslightbox-container .fslightbox-slide--current .navigation-container');
  if (!currentSlideNav) return;

  const prevBtn = currentSlideNav.querySelector('.custom-prev-btn');
  const nextBtn = currentSlideNav.querySelector('.custom-next-btn');

  // 第一张幻灯片隐藏上一页按钮
  if (currentIndex === 0) {
    prevBtn.style.display = 'none';
  } else {
    prevBtn.style.display = 'inline-block';
    prevBtn.querySelector('.prev-name').textContent = nameList[currentIndex - 1];
  }

  // 最后一张幻灯片隐藏下一页按钮
  if (currentIndex === total - 1) {
    nextBtn.style.display = 'none';
  } else {
    nextBtn.style.display = 'inline-block';
    nextBtn.querySelector('.next-name').textContent = nameList[currentIndex + 1];
  }
}

注意事项 #

• 插件默认在灯箱两侧的原生切换按钮不会被该逻辑影响，无需额外处理
• 后续新增幻灯片时，只需给新触发器添加data-slide-name属性、补充对应内联内容结构即可，无需修改导航逻辑
• 若使用框架版本的fsLightbox，逻辑完全一致，拿到组件暴露的灯箱实例后可直接复用上述方法和事件

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