reveal.js-verticator

Verticator

Version Downloads

A plugin for Reveal.js that adds indicators to show the amount of slides in a vertical stack.

Sometimes you would like to have an indication of how many slides are remaining in a vertical stack. This plugin does just that. It is visually similar to the indicators at fullPage.js.

Don’t overdo it. You probably don’t want 30 bullets on the right-hand side of your presentation.

Verticator follows your theme

If you do not override the colors in the configuration, Verticator detects what colors you use in your theme CSS. This works on both regular slides and on slides that have an inverted color. For example, if the theme is dark, and you use <section(data-background-color="#fff")></section> on one or more slides, those slides will then have a white background. In standard Reveal themes, the text in those white slides will then invert to be very dark gray. Verticator just copies that behaviour. The theme color is set as a CSS variable (--c-theme-color) in the Reveal element, and can also be used by other elements.

Overriding colors

Overriding colors can be done in several ways:

Installation

Regular installation

Copy the verticator folder to the plugins folder of the reveal.js folder, like this: plugin/verticator.

npm installation

This plugin is published to, and can be installed from, npm.

npm install reveal.js-verticator

Adding Verticator to your presentation

JavaScript

There are two JavaScript files for Verticator, a regular one, verticator.js, and a module one, verticator.esm.js. You only need one of them:

Regular

If you’re not using ES modules, for example, to be able to run your presentation from the filesystem, you can add it like this:

<script type="text/javascript" src="dist/reveal.js"></script>
<script src="plugin/verticator/verticator.js"></script>
<script>
	Reveal.initialize({
		// ...
		plugins: [ Verticator ]
	});
</script>

From npm

You can run it directly from npm:

<script type="module">
	import Reveal from 'reveal.js';
	import Verticator from 'reveal.js-verticator';
	import 'reveal.js-verticator/plugin/verticator/verticator.css';
	Reveal.initialize({
		// ...
		plugins: [ Verticator ]
	});
</script>

Otherwise, you may want to copy the plugin into a plugin folder or an other location::

<script type="module">
	import Reveal from './dist/reveal.mjs';
	import Verticator from './plugin/verticator/verticator.mjs';
	import './plugin/verticator/verticator.css';
	Reveal.initialize({
		// ...
		plugins: [ Verticator ]
	});
</script>

Styling

The styling of Verticator is automatically inserted when the verticator folder is manually copied to the Reveal.js plugin folder.

If you import reveal.js-verticator from npm, you will need to import the CSS file yourself. Depending on your setup this can be something like this:

import 'reveal.js-verticator/plugin/verticator/verticator.css';

Verticator will detect if it runs in a module environment and will then not autoload the CSS. You can still set cssautoload to true if you like, but your bundler (Vite, Webpack) may not like that. In any of these cases, import the CSS file yourself.

If you want to change the Verticator or tooltip style, you do a lot of that via the Reveal.js options. Or you can simply make your own style and use that stylesheet instead. Linking to your custom styles can be managed through the csspath option of Verticator or through import when using modules.

Custom CSS

If and when you decide to create your own CSS file, make sure that you also include the following CSS variable, that is used by the plugin to avoid loading the CSS multiple times, and to avoid using the autoloading feature when using modules:

:root {
    --cssimported-verticator: true;
}

HTML

Verticator needs a UL with the class ‘verticator’ to insert the indicators. If there is not one already in the HTML, Verticator will generate it automatically for you. This can be disabled by setting the option autogenerate to false.

Configuration

There are a few options that you can change from the Reveal.js options. The values below are default and do not need to be set if not changed.

Reveal.initialize({
	// ...
	verticator: {
		themetag: 'h1',
		color: '',
		inversecolor: '',
		skipuncounted: false,
		clickable: true,
		position: 'auto',
		offset: '3vmin',
		autogenerate: true,
		tooltip: false,
		scale: 1,
		cssautoload: true,
		csspath: ''
		}
	},
	plugins: [ Verticator ]
	// ... 
	]
});

Like it?

If you like it, please star this repo.

License

MIT licensed

Copyright (C) 2024 Martijn De Jongh (Martino)

This site is open source. Improve this page.