Timeline for reveal

Basic use case

make a timeline (video)
- save it someplace reveal.js can find it (maybe next to your presentation, or on Google Docs)
in reveal.js/index.html
- add reveal-timeline.js as a dependency
- in a <section> of reveal.js markup
  - add data-timeline="<url of the someplace>" to something, e.g. a div

Example

Let’s assume I made an Timeline in JSON, and saved it next to my index.html.

<html>
  ...
  <section>
    <h1>Basic JSON Test</h1>
    <div data-timeline="welcome.json"></div>
  </section>
  ...
  <script>
    ...
    Reveal.initialize({
      dependencies: [
        ...
        {
          // maybe you put this in `plugins`
          src: 'reveal-timeline.js',
          condition: function(){
            return !!document.querySelector( '[data-timeline]' );
          }
          // Additional options
          // defaults to using already-loaded version, or CDN
          //js: "./js/timeline-min.js",
          // use a different attribute for your fragment selector
          //css: "./css/timeline.css",
          // use a different font
          //font: "Bevan-PotanoSans",

        }
        ...
      ]
    ...
    }
    ...
  </script>
  ...
</html>

RevealJS TimelineJS

Timeline for reveal

Basic use case

Example

LIMITATIONS

index.html

reveal-timeline.js

welcome.json