(Demo not for mobile devices)
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 also fixes the appearance of text inside double opposite backgrounds, for example when the theme is dark, the stack is light and the slide is dark again.
Verticator is configurable globally through the Reveal options, but the colors can also be changed per slide.
Verticator uses your headings to get the color for the bullets, but you can also use other elements:
Reveal.initialize({
...
verticator: {
themetag: "h1" // Can be set to other tags like "p"
},
plugins: [ Verticator ]
})
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: "" // Can be set to any CSS color
},
plugins: [ Verticator ]
})
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: {
inversecolor: "" // Can be set to any CSS color
},
plugins: [ Verticator ]
})
To skip bullets for certain slides, set the option skipuncounted to true. Then set a data-attribute data-visibility="uncounted" to the slide.
Reveal.initialize({
...
verticator: {
skipuncounted: false // Can be set to true
},
plugins: [ Verticator ]
})
Reveal uses data-visibility="uncounted" to hide progress and skipping page numbers for certain slides. In this presentation, skipuncounted is set to true, and this section has the data-attribute.
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: true // Can be set to false
},
plugins: [ Verticator ]
})
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.
Reveal.initialize({
...
verticator: {
position: "auto" // Can be set to "left" or "right"
},
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: "3vmin" // Can be set to any CSS size and unit, like "40px"
},
plugins: [ Verticator ]
})
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.
Reveal.initialize({
...
verticator: {
autogenerate: true // Can be set to false
},
plugins: [ Verticator ]
})
Verticator can show tooltips of page titles, like this:
Reveal.initialize({
...
verticator: {
tooltip: false // Can be set to "data-name" or "auto"
},
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: true or 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. To tweak that scaling, you can manually set it.
Reveal.initialize({
...
verticator: {
scale: 1 // Can be set to a value between 0.5 and 2.
},
plugins: [ Verticator ]
})Verticator will automatically load the CSS if this is set to true.
Reveal.initialize({
...
verticator: {
cssautoload: true
},
plugins: [ Verticator ]
})If Verticator runs in a bundler or module environment, where you should use import for your styling, it will automatically turn off autoloading. You can still turn on autoloading, but you will need to manually add this setting like shown above.
The csspath option can be used when the you want to use your own stylesheet, instead of the provided one.
Reveal.initialize({
...
verticator: {
csspath: ''
},
plugins: [ Verticator ]
})Verticator will automatically load the styling for the bullets and the tooltips. If you really want to change things that you can't override from the Reveal.js config, you can link to your own CSS file here. This will not work in a bundler or module environment where you should use import.
Force the bullets to use the inverse color with a data-attribute of data-verticator="inverse", even on slides with unchanged background colors.
Photo by Brett Sayles from Pexels.
Force the bullets to use the regular color with a data-attribute of data-verticator="regular", even on slides with inverse background colors.
Photo by Tyler Lastovich from Pexels.
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.