Way to remove slide-number for n^th slide in a revealjs presentation?

[melissavanbussel]

I would like to remove the slide-number for the $n^{th}$ slide in a revealjs presentation, without removing the slide-number from any of the other slides. Is there a way to achieve this?

I can get this to work for the title slide by using the solution described here, but can't figure out how to apply it to a non-title slide.

Any clever workarounds / alternatives way to tackle this problem are appreciated :)

Thanks!

[mcanouil]

Initially from: https://stackoverflow.com/questions/31146251/hide-slide-number-on-title-page

---
title: "Untitled"
format:
  revealjs:
    slide-number: true
    include-after-body: 
      - text: |
          <script type="text/javascript">
          Reveal.addEventListener('slidechanged', (event) => {
            const isSnOn = (event.currentSlide.dataset.hideSlideNumber !== 'true');
            Reveal.configure({ slideNumber: isSnOn });
          });
          </script>
---

## Slide 1

## Slide 2

## Slide 3 without slide number {data-hide-slide-number="true"}

## Slide 4 without slide number {data-hide-slide-number="true"}

Screen.Recording.2023-05-16.at.20.29.01.mov

[mcanouil]

At least for the title page, I believe this is the thing nearly all users will want (even if they don't know it).

Maybe, something like "remove all slide number in slides after" an .appendix class.

[melissavanbussel]

This is great, thank you so much @mcanouil!

Is there a way to apply the {data-hide-slide-number='true'} to the title slide as well?

[mcanouil]

There are various ways, but here I simply add a new JavaScript event listener to hide the slide number on title page when all is loaded.

---
title: "Untitled"
format:
  revealjs:
    slide-number: true
    theme: no-slide-number.scss
    include-after-body: 
      - text: |
          <script type="text/javascript">
          Reveal.addEventListener('slidechanged', (event) => {
            const isSnOn = (event.currentSlide.dataset.hideSlideNumber !== 'true');
            Reveal.configure({ slideNumber: isSnOn });
          });
          Reveal.addEventListener('ready', (event) => {
            const isFirst = event.indexh === 0;
            Reveal.configure({ slideNumber: !isFirst });
          });
          </script>
---

## Slide 1

## Slide 2

## Slide 3 without slide number {data-hide-slide-number="true"}

## Slide 4 without slide number {data-hide-slide-number="true"}

[cderv]

I think this is a feature that should be possible upstream, but still a feature request for now: hakimel/reveal.js#3151

I think it would be worth adding a feature for this in Quarto though.

[mcanouil]

Additionally, there is a CSS trick to hide slide number on the title slide:

.reveal .slide-number > a[href*='title-slide'] {
  display: none;
}

There is also another JavaScript to do that as highlighted by @cderv in #557

[mcanouil]

FYI:

• Opened issue:
  • [FR] Ability to hide footer on specific slides including title-slide #1445
• Related discussions:
  • Reveal.js Presentation: Title slide without page number and logo #557
  • revealjs presentation: hiding footer and slide menu control for a specific slide #825
  • Hide slide menu button when printing slides #4181
  • Way to remove slide-number for n^th slide in a revealjs presentation? #5566