Verticator

What does it do?

Verticator shows vertical indicators

On vertical slides only

If you do not override the colors in the options, Verticator will use your theme colors: the bullets will be the same color as text in your presentation.

The theme color is set as a CSS variable (--c-theme-color) in the Reveal element, and can also be used by other elements. On this page, it is rgb(255, 255, 255), because that is also the text color.

Verticator detects if the slide background is set to a different color. If you do not override the colors in the options, the bullets will still take on the heading- or textcolor of the slide.

On this page, the CSS variable (--c-theme-color) is rgb(34, 34, 34), because that is also the text color.

Verticator is configurable globally through the Reveal options, but the colors can also be changed per slide.

Global options

Option 1: themetag

Verticator uses your headings to get the color for the bullets, but you can also use other elements:

Reveal.initialize({
	...
	verticator: {
		themetag: "p"
	},
	plugins: [ Verticator ]
})

Option 2: color

You can override the (themed) color of the bullets to a specific color. You can use named colors, hex and rgb:

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

Option 3: inversecolor

You can override the (themed) inverse color of the bullets to a specific color. These apply if a slide has an inverse color to the main background of the theme.

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

Option 4: skipuncounted

To omit bullets in certain slides, set a data-attribute data-visibility="uncounted" to the slide. Then set this option (disabled by default, enabled here) 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

Verticator is automatically positioned depending on the rtl setting of Reveal.js. This setting is used in languages like Hebrew and Arabic. Verticator will be on the left in that case. It can also be manually positioned like this:

Reveal.initialize({
	...
	verticator: {
		position: 'left' // or 'right'
	},
	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, 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 11: csspath

Verticator will automatically load the styling for the bullets and (if needed) the tooltips. If you want to change the styling, you can link to your own CSS files:

Reveal.initialize({
	...
	verticator: {
		csspath: {
			verticator:  'path-to/my-css-files/customverticator.css',
			tooltip: 'path-to/my-css-files/customtooltip.css'
		}
	},
	plugins: [ Verticator ]
})

Slide options

1. Force inverse color
2. Force regular color
3. Force specific color

Option 3: Force specific color

The Verticator color can also be set specifically (per slide) with a data-attribute of data-verticator="*" where the wildcard is a CSS color.

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

Really.

Option demos

• Dark theme with no options: this demo
• Dark theme with color options
• Light theme with no color options
• Light theme with color options
• Tooltip demo