Pager

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

Limitation

This pager only works in a single page presentation because it listens to events emitted by the deck on the document level.

Installation

This component could be added to your web application using the following methods.

Using from a CDN

It's recommended to use unpkg to use the DeckDeckGo pager from a CDN. To do so, add the following include script in the main HTML file of your project:

<script type="module" src="https://unpkg.com/@deckdeckgo/pager@latest/dist/deckdeckgo-pager/deckdeckgo-pager.esm.js"></script>

Install from NPM

Install it in your project from npm using the following command:

npm install @deckdeckgo/pager

Framework integration

The Stencil documentation provide examples of framework integration for Angular, React, Vue and Ember.

That being said, commonly, you might either import or load it:

Import

import '@deckdeckgo/pager';

Loader

import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/pager/dist/loader'; deckDeckGoElement();

Usage

In order to the pager to your presentation, provide it as last child of your deck using the slot pager.

<deckgo-deck> <deckgo-pager slot="pager"> </deckgo-pager> </deckgo-deck>

Customization

The following 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)
--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

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.