jTimeline is a small, responsive, and SEO-friendly jQuery timeline plugin that creates a scrollable horizontal timeline from an unordered HTML list.
horizontal timeline bootstrap, horizontal timeline html, horizontal timeline js, horizontal timeline css, responsive horizontal timeline
How to make use of it:
1. Add the jTimeline plugin’s JavaScript and CSS files to the webpage.
<link rel="stylesheet" href="/path/to/jtimeline.css" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/jtimeline.js"></script>
2. Add your events (steps) as list items to the timeline.
<div id="jtimeline-demo" class="jtimeline"> <ul class="jtimeline-events"> <li class="jtimeline-event" data-timestamp="1591416000"> June 6th 2020<br /> Birthday </li> <li class="jtimeline-event" data-timestamp="1609477200"> January 1st 2021<br /> New Year </li> <li class="jtimeline-event is-active" data-timestamp="1610514000"> January 13th 2021<br /> Launch of jTimeline </li> <li class="jtimeline-event" data-timestamp="1613278800"> February 14th 2021<br /> Valentine's Day </li> </ul> </div>
3. Initialize the plugin timeline.
$(function(){ $('#jtimeline-demo').jTimeline(); });
4. Configure the schedule by overriding the default options as displayed.
$('#jtimeline-demo').jTimeline({ // pixels per second resolution: 50000, // minimum spacing between events minimumSpacing: 200, // scrolling (translateX) step size step: 200, // character for left arrow leftArrow: "←", // character for right arrow rightArrow: "→", });
Horizontal Scrollable Timeline Plugin, jTimeline Github
See Demo And Download
Official Website(optimumweb): Click Here
This superior jQuery/javascript plugin is developed by optimumweb. For extra Advanced Usages, please go to the official website.
Be First to Comment