Dynamic Vertical Timelines Made Easy With VerticalTimeline.js

Preview:

Description:

A lightweight, dynamic, responsive, and vertical timeline for displaying a timeline of historical events, product releases, or project milestones in a linear fashion.

How to use it:

1. Include the timeline library’s files on the page.

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

2. Create an empty DIV container to hold the timeline.

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

3. Create a new instance of the VerticalTimeline and define an array of events as follows:

var timeline = new VerticalTimeline({
    'id' : 'timeline', // unique ID
    'mode' : 'light',// dark or light mode
    'items' : [ // event shere
        {
        'type' : 'primary', // event type
        'title' : 'The first event',
        'image' : '<img src="event-1.jpg">',
        'text' : 'Event 1',
        'time' : '2 Hours Ago',
        },
        {
        'type' : 'danger',
        'title' : 'The second event',
        'image' : '<i>Iconic Font</i>',
        'text' : 'Event 2',
        'time' : '3 Hours Ago'
        },
        {
        'type' : 'secondary',
        'title' : 'The third event',
        'image' : '<svg>SVG Icon</svg>',
        'url' : '#',
        'text' : 'Event 3',
        'time' : '5 Hours Ago'
        }
        // ... more events here
    ]
});