Responsive Interactive Timeline In Vanilla JavaScript – Simple Timeline

Category: Javascript | July 20, 2019
Author: CheshireBeane
Views Total: 1,769 views
Official Page: Go to website
Last Update: July 20, 2019
License: MIT

Preview:

Responsive Interactive Timeline In Vanilla JavaScript – Simple Timeline

Description:

A simple, responsive, interactive timeline implemented in pure JavaScript.

On the desktop, hover the timeline to scroll between nodes. Click the node to display the details about the event.

On the mobile device, it will collapse into a vertical timeline where the event details will always be visible on the screen.

How to use it:

Insert the Simple Timeline’s JavaScript and Stylesheet into the html file.

<link rel="stylesheet" href="simpletimeline.css">
<script src="simpletimeline-min.js"></script>

Create a container in which you want to hold the timeline.

<div id="timeline"></div>

Define your own event data for the timeline.

const DATA = [
      {
        year: '2004',
        title: 'This is a test title',
        image: 'https://picsum.photos/600/400'
      },
      {
        year: '2005',
        title: 'This is a test title 2',
        image: 'https://picsum.photos/600/400'
      },
      {
        year: '1990',
        title: 'This is a test title 3',
        image: 'https://picsum.photos/600/400'
      },
      {
        year: '2018',
        title: 'This is a test title 4',
        image: 'https://picsum.photos/600/400'
      },
      {
        year: '2005',
        title: 'This is a test title 2',
        image: 'https://picsum.photos/600/400'
      },
      {
        year: '1990',
        title: 'This is a test title 3',
        image: 'https://picsum.photos/600/400'
      },
      {
        year: '2018',
        title: 'This is a test title 4',
        image: 'https://picsum.photos/600/400'
      },
      {
        year: '2018',
        title: 'This is a test title 4',
        image: 'https://picsum.photos/600/400'
      },
      {
        year: '2005',
        title: 'This is a test title 2',
        image: 'https://picsum.photos/600/400'
      },
      {
        year: '1990',
        title: 'This is a test title 3',
        image: 'https://picsum.photos/600/400'
      },
      {
        year: '2018',
        title: 'This is a test title 4',
        image: 'https://picsum.photos/600/400'
      },
];

Render a timeline on the page.

if(document.getElementById('timeline')) {
  let timeline = new Timeline('timeline', DATA);
  timeline.init();
}

Changelog:

07/20/2019

  • Bugfix

You Might Be Interested In:


Leave a Reply