reveal.js is 10 years old now, and the way it works has changed a bit to keep up with new stuff in browsers. So each time I make a presentation, I have to decide if I'm going to update reveal.js, and see if it's got a way of doing something I had to hack in before.
My solution lately has been to use CSS display: grid on slides, because I know how to centre stuff and share out space in a fairly straightforward manner.
But it's always a faff, and reveal.js is now so big I spend a lot of time trying to understand how it works.
What do you do when you don't understand how a complicated bit of software works? Write your own copy from scratch!
Then you have only yourself to blame.
The thing that got me this time was having the same graphic displayed on a range of slides, and updating it depending on which slide is shown. I spent a couple of hours fiddling with reveal.js's events API before giving up.
I came up with something very simple: each slide is a <section> tag, styled to 100vh height and laid out vertically, so you only see one at a time. They have tabindex="0" so you move between them by pressing Tab.
I was expecting to have to write a thing to call scrollIntoView on the next slide, but Firefox automatically scrolls an element into view when you focus it, so I got the fundamentals of a slideshow without any JS!
To update the graphic, I added a 'focus' event listener to each <section> tag, calling a function 'update_graph' with the index of the tag among its siblings.
That's it! It worked brilliantly.
I think for a set of slides I want other people to be able to use, it'd need more stuff: at the moment it only knows which slide is shown from focus events, but it should really pay attention to scrolling too.
This time, there were no links or interactive bits in the slides that people might want to access on their own, do I just needed it to work for me during the presentation.
Anyway, I'm not going to make any effort to share this system for other people to make presentations with.
The point is that it's idiosyncratic, a product of exactly the things I know how to do and don't know how to do.
thanks to @pkra for telling me about CSS scroll-snap, which lets me insist that you can't scroll halfway between slides. I've replaced the focus listener with a scroll listener, so this now works nicely with just scrolling!
@christianp I just use css scroll snap nowadays which also does the job well nowadays. Arrow keys are enough. Horizontally it's a little unusual but a note on the first slide siffices. I usually make my headings auto-link out of markdown to get anchors for slides; then tabbing works to navigate, too.
The social network of the future: No ads, no corporate surveillance, ethical design, and decentralization! Own your data with Mastodon!