reveal-timeline

A reveal.js plugin for adding a timeline to slides:

Check out the live demo.

The timeline is generated using timeline.js.

Installation

1. Download and install the package in your project:

   npm install --save reveal-timeline

   or

   yarn add reveal-timeline

   or just download dist/reveal-timeline.js into the plugin folder of your reveal.js presentation, e.g.. plugins/reveal-timeline.

2. Add the plugins to the dependencies in your presentation

   <script src="node_modules/reveal-timeline/dist/reveal-timeline.js"></script>

   // ...
   Reveal.initialize({
     // ...
     plugins: [
         // ...
         RevealTimeline,
     ]
   });

   If you're using reveal-md you can add a script to load the plugin:

   options.plugins.push(RevealTimeline)

   and then add a reference to this script along with node_modules/reveal-timeline/dist/timeline.js to the scripts object inside reveal-md.json config file.

For reference, take a look at the demo package in this repo.

Usage

The timeline is generated by parsing section data attributes:

| HTML attribute | timeline.js property | optional | possible values | |-|-|-|-| | data-timeline-start-date | start_date | only for title | ISO 8601 date | | data-timeline-end-date | end_date | yes | ISO 8601 date | | data-timeline-headline | text.headline | yes | any text | | data-timeline-group | group | yes | any text | | data-timeline-display-date | display_date | yes | any text | | data-timeline-autolink | autolink | yes | boolean | | id | unique_id | yes | a unique string |

If data-timeline-headline is not defined, the headline will be a concatenation of all headings in a slide.

In addition, adding the attribute data-timeline-hidden to a slide will cause the timeline to be removed from this slide.

For more details, see timeline.js documentation.

Configuration

To configure the plugin pass a timeline object to Reveal.initialize with any of the following options:

| name | purpose | allowed values | default| | - | -|- | -| | position | timeline position | 'top' or 'bottom' | 'bottom'| | height | timeline height | CSS <length> or number of pixels | '140px| | separator | separator between headline lines | any text | '<br><br>'|