如何在reveal.js中隐藏或禁用底部幻灯片的前后导航功能

reveal.js没有内置的data-controls="hide"这类直接禁用水平导航的属性，但可以通过自定义data属性+JavaScript监听的方式实现，核心是在切换到目标幻灯片时禁用左右导航按钮和键盘事件，离开时恢复。

具体步骤 #

1. 给底部幻灯片添加自定义属性 #

在需要禁用水平导航的底部<section>标签上添加自定义标记属性：

<section data-disable-horizontal-nav="true">
  <h2>底部幻灯片</h2>
  <p>此幻灯片无法进行左右切换</p>
</section>

2. 编写JavaScript逻辑控制导航状态 #

在reveal.js初始化代码后，添加事件监听来控制导航按钮和键盘操作：

Reveal.initialize({
  // 你的现有配置项示例
  controls: true,
  progress: true,
  vertical: true
}).then(() => {
  // 封装导航状态更新逻辑
  const updateNavState = () => {
    const currentSlide = Reveal.getCurrentSlide();
    const disableHorizontal = currentSlide.hasAttribute('data-disable-horizontal-nav');
    const leftNav = document.querySelector('.navigate-left');
    const rightNav = document.querySelector('.navigate-right');

    // 控制导航按钮的可用状态与显示
    if (disableHorizontal) {
      leftNav.disabled = true;
      rightNav.disabled = true;
      leftNav.style.opacity = '0';
      rightNav.style.opacity = '0';
    } else {
      leftNav.disabled = false;
      rightNav.disabled = false;
      leftNav.style.opacity = '1';
      rightNav.style.opacity = '1';
    }
  };

  // 初始化时检查当前幻灯片状态
  updateNavState();

  // 切换幻灯片时同步更新导航状态
  Reveal.on('slidechanged', updateNavState);

  // 拦截键盘左右箭头事件，防止通过键盘切换
  document.addEventListener('keydown', event => {
    const currentSlide = Reveal.getCurrentSlide();
    if (currentSlide.hasAttribute('data-disable-horizontal-nav') && 
        (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
      event.preventDefault();
    }
  });
});

3. 可选：自定义禁用样式 #

如果不想完全隐藏按钮，而是保留置灰不可点击的状态，可以添加CSS样式：

.navigate-left:disabled,
.navigate-right:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

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