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