Verticator shows vertical indicators
On vertical slides only
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.
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.
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.
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.
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.
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 ]
})
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 ]
})
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 ]
})
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 ]
})
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.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 ]
})
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: {
path: {
verticator: 'path-to/my-css-files/customverticator.css',
tooltip: 'path-to/my-css-files/customtooltip.css'
}
},
plugins: [ Verticator ]
})Don’t overdo it: limit vertical slides. You probably don’t want 30 bullets on the right-hand side of your presentation.
Really.