Verticator

for Reveal.js

What does it do?

Verticator shows vertical indicators

On vertical slides only

Colors

You can keep it as it is

By default, the Verticator bullets are black. Verticator.js assumes that you have a light theme (like this one), and has the colors set in CSS accordingly.

If a dark background (a hex color) is set through an attribute of data-background or data-background-color on a slide (a section), the Verticator bullet will be white.

Options

Options

  1. darktheme
  2. color
  3. oppositecolor
  4. skipuncounted
  5. clickable
  6. position
  7. offset
  8. autogenerate
  9. scale
  10. tooltip

Option 1: darktheme

If your theme is dark, let Verticator know by setting it in the options: 

Reveal.initialize({
	...
	verticator: {
		darktheme: true
	},
	plugins: [ Verticator ]

Now the Verticator colors will be white on all normal slides and black on slides that are set to a light background with attributes.

Option 2: color

You can set the main color of the Verticator bullets to a specific color. You can use standard CSS named colors, hex or rgb ones:

Reveal.initialize({
	...
	verticator: {
		color: 'red'
	},
	plugins: [ Verticator ]

For a light theme, the Verticator colors will be red on all normal slides and (still) white on slides that are set to a dark background with attributes.

Option 3: oppositecolor

You can set the opposite color of the Verticator bullets to a specific color. These apply if a slide has an opposite color to the main background of the theme.

Reveal.initialize({
	...
	verticator: {
		oppositecolor: 'yellow'
	},
	plugins: [ Verticator ]

For a light theme, the Verticator colors will (still) be black on normal slides and yellow on slides that are set to a dark background with attributes.

Option 4: skipuncounted

To omit drawing Verticator bullets for certain slides, set a data-attribute data-visibility="uncounted" to the slide. Then set this option (disabled by default, enabled in this demo) to true:

Reveal.initialize({
	...
	verticator: {
		skipuncounted: true
	},
	plugins: [ Verticator ]

The data-attribute is the Reveal way to hide progress and skipping page numbers for certain slides.

Option 5: clickable

Clicking on a a Verticator bullet jumps to to the corresponding page. This behaviour is enabled by default but can be disabled.

Reveal.initialize({
	...
	verticator: {
		clickable: false
	},
	plugins: [ Verticator ]

Option 6: position

By default, Verticator is positioned on the right-hand side of the presentation. It can also be set on the left-hand side like this:

Reveal.initialize({
	...
	verticator: {
		position: 'left'
	},
	plugins: [ Verticator ]

Option 7: offset

By default, Verticator is positioned '3vmin' off the edge of the presentation. It can be set to any other valid CSS size and unit:

Reveal.initialize({
	...
	verticator: {
		offset: '40px'
	},
	plugins: [ Verticator ]

Option 8: autogenerate

Verticator will autogenerate bullets. In presentations with huge vertical stacks, this can result in an unsightly column of bullets. The user can then disable the autogeneration like this:

Reveal.initialize({
	...
	verticator: {
		autogenerate: false
	},
	plugins: [ Verticator ]

Option 9: tooltip

Verticator can show tooltips of page titles, like this:

Reveal.initialize({
	...
	verticator: {
		tooltip: 'data-name'
	},
	plugins: [ Verticator ]

It is turned off by default but can be enabled with these options:

  • tooltip: 'data-name' or any other attribute of the vertical slide.
  • tooltip: 'auto'. This will check titles of each slide in the order: data-verticator-tooltip, data-name, title, and if none found, headings inside each slide in the order: h1, h2, h3, h4.

Option 10: scale

Verticator will scale with the same ratio as the Reveal slides (since v1.1.1), but only up. To make the Verticator even bigger, you can manually set a scale. It is set to 1 by default, but can be changed like this:

Reveal.initialize({
	...
	verticator: {
		scale: 1.2
	},
	plugins: [ Verticator ]

Option demos

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

Really.