Awesome jQuery-based responsive timeline generator

If you want to add time line feature in your website like facebook, Then here i am going to introduce awesome jQuery-based responsive timeline generator plugin created by RyanFitzgerald, With the help of this plugin you can easily create vertical static and dynamic timeline which may display your life journey or your profession or company journey with more attractive manner.
Timeline is a responsive, jQuery-based generator that builds a timeline based on user input. It comes with a number of customization options out of the box such as displaying dates, alternating toggle, animation, and choosing which side it starts on. It comes with little to no styling other than what it required, so it can be styled to suite your specific needs. I originally created a timeline for my personal website, however I have since found a number of possible reuse options for it, so I decided to create this simple plugin.
jquery-timeline


Integration of jQuery-based responsive timeline generator on your website

First you need to add required dependent CSS, JS libraries on page

<!-- CSS -->
<link rel="stylesheet" href="vertical-timeline.css">
 
<!-- JS -->
<script  src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script>
<script src="vertical-timeline.min.js"></script>

HTML

In this section add html which need to use as timeline, Add data-vtdate attribute on div to display date along with timeline paragraph.

<div id="timeline">
    <div data-vtdate="September 2016">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
            Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui.
        </p>
    </div>
    <div data-vtdate="March 2016">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
            Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui.
        </p>
    </div>
    <div data-vtdate="January 2016">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
            Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui.
        </p>
    </div>
</div>



jQuery

Action time..!! finally add verticalTimeline() function on page to make your timeline actionable.

<script>
$(function() {  
  $('#timeline').verticalTimeline();
 }); 
</script>

Timeline has a few options that can be customized to suite your specific needs. The included options that can be utilized are:

<script>
$(function() {  
  $('#timeline').verticalTimeline({
    startLeft: false,
    alternate: true,
    animate: "fade", 
    arrows: false
 }); 
</script>

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and customization.