timeline.js---jQuery timeline plugin, easily creates a timeline

Timelien.js is a jQuery timeline plugin, which could easily create a timeline.

GitHube here

Step1:
link timeline.css 

<link rel="stylesheet" type="text/css" href="css/timeline.min.css">

link jquery and timeline.js

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script type="text/javascript" src="js/timeline.min.js"></script>

Step2:

html

The outer layer's class is timeline-container timeline-theme-1. and the inner layer's class is timeline js-timeline.Data-time should be a number or words which will show at timeline.

I got different size of images from internet,so I fixed the width and height of the images.

css

According to the images you choose,you can resize the timeline-container width,timeline-list width and timeline-item width and padding.(timeline.css file)

css

Step3:

js

I set up timeline start from the last item and show on the bottom of the slides.

Available options listed below.

$('.timeline').Timeline({
    mode: 'horizontal',
    // value: horizontal | vertical, default to horizontal
    itemClass: 'timeline-item',
    // value: item class
    dotsClass: 'timeline-dots',
    // value: dots item class
    activeClass: 'slide-active',
    // value: item and dots active class
    prevClass: 'slide-prev',
    // value: item and dots prev class
    nextClass: 'slide-next',
    // value: item and dots next class
    startItem: 'first', // first|last|number
    // value: first | last | number , default to first
    dotsPosition: 'bottom',
    // value: bottom | top, default to bottom
});