Press "Enter" to skip to content

A jQuery Horizontal Scrollable Timeline Plugin | jTimeline

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: "&larr;", 

  // character for right arrow
  rightArrow: "&rarr;", 
  
});

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

    Leave a Reply

    Your email address will not be published. Required fields are marked *