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.

Keep in mind that not all themes will also change the color of regular text to an opposite color by changing this attribute! The themes 'simple', 'black' and 'white' work allright though. If needed, the code can be found in the beginning of those CSS files.

Options

Options

  1. darktheme
  2. color
  3. oppositecolor
  4. skipuncounted
  5. clickable

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 demos

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

Really.