All examples By author By category About

bollwyvl

RevealJS TimelineJS

Timeline for reveal


Basic use case


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>

LIMITATIONS