Pager

A pager for the progression of the presentation can optionally be displayed in form of a progress circle bar.

Show or hide

To show 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-displaynoneThe display property of the pager. Set to block to display 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-displaynoneSet to block to display a progression with percentage (for example: 35%)
--pager-text-slides-displaynoneSet 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.