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 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.

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: "h1" // Can be set to other tags like "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: "" // Can be set to any CSS color
    },
    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: {
        inversecolor: "" // Can be set to any CSS color
    },
    plugins: [ Verticator ]
})

Option 4: skipuncounted

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.

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: true // Can be set to 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.

Reveal.initialize({
    ...
    verticator: {
        position: "auto" // Can be set to "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: "3vmin" // Can be set to any CSS size and unit, like "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.

Reveal.initialize({
    ...
    verticator: {
        autogenerate: true // Can be set to false
    },
    plugins: [ Verticator ]
})

Option 9: tooltip

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: "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. 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 ]
})

Option 11: csspath

Verticator will automatically load the styling for the bullets.

Reveal.initialize({
    ...
    verticator: {
        csspath: "" // Can be a path to a CSS file
    },
    plugins: [ Verticator ]
})

If you want to change the styling, you can link to your own CSS files.

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