Pager

DeckDeckGo displays a pager in form of a progress circle bar if the presentation is not displayed in fullscreen.

It's possible to hide it or to customize the following various style options.

Also worth to notice that the pager inherits per default the document and deck direction (LTR or RTL for example).

Show or hide

To show or hide the pager, a CSS4 variable has to be set on the <deckgo-deck> element. Two more options are also available when set on this element.

AttributeDefaultDescription
--pager-displayThe display property of the pager. Set to none to hide it.
--pager-position-leftThe left attribute of the absolute positioning of the pager over the deck
--pager-position-rightThe right attribute of the absolute positioning of the pager over the deck

Customization

The following style options are available to style the pager:

CSS4 variableDefaultDescription
--pager-size56px
--pager-margin-top8px
--pager-margin-end8px
--pager-margin-bottom8px
--pager-margin-start8px
--pager-background#eee
--pager-text-color#4c8dff
--pager-text-size0.5em
--pager-stroke-outer-width2.8
--pager-stroke-inner-width1.8
--pager-text-percentage-displayhiddenSet to block to display a progression with percentage (for example: 35%)
--pager-text-slides-displayhiddenSet to block to display a progression as slides' count (for example: 2/15)

Note: of course if you would display both --pager-text-percentage-display and --pager-text-slides-display it would be a weird display, use just one at once.

Events

In case you would like to hook on the pager click, it triggers the following event:

EventEmitted valueDescription
pagerClickEmitted when the user click on the pager.