Interactive Timeline Slider In jQuery - Horizontal Timeline

A jQuery plugin to create a dynamic, interactive, responsive, touch-friendly, SEO-friendly timeline that makes it possible to displays event data in a horizontal slider interface.

More features:

• Custom date intervals for desktop/tablet/mobile.
• Custom display mode: dateTime, date, time, dayMonth, monthYear, year.
• Automatically slides through event data.
• Allows to slide through events with mouse drag, touch swipe, keyboard arrows, mouse wheel, etc.
• Font Awesome based navigation controls.
• Search engine friendly. Based on the HTML ordered list.

See also:

How to use it:

1. Include jQuery library together with the Horizontal Timeline plugin's files on the html page.

<link rel="stylesheet" href="/path/to/horizontal_timeline.2.0.min.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/horizontal_timeline.2.0.min.js"></script>

2. Include the jQuery touchSwipe plugin for the support of touch gestures. REQUIRED if the addRequiredFile is set to false (See Below).

<script src="/path/to/jquery.touchSwipe.min.js"></script>
<!-- Or from a CDN -->
<script src="https://unpkg.com/[email protected]/jquery.touchSwipe.min.js"></script>

3. Include the jQuery mousewheel plugin for the support of mouse wheel. REQUIRED if the addRequiredFile is set to false (See Below).

<script src="/path/to/jquery.touchSwipe.min.js"></script>
<!-- Or from a CDN -->
<script src="https://unpkg.com/[email protected]/jquery.touchSwipe.min.js"></script>

4. Include the Font Awesome Iconic Font for the navigation controls.

<link rel="stylesheet" href="/path/to/fontawesome.min.css">

5. Add the timeline events to an HTML ordered list and specify the Datetime in the data-date attribute. The selected CSS class is used to display the event on init.

<div class="horizontal-timeline" id="myTimeline">
  <div class="events-content">
    <ol>
      <li class="selected" data-date="11/02/2012">
        Event 1
      </li>
      <li data-date="12/06/2015">
        Event 2
      </li>
      <li data-date="08/06/2019">
        Event 3
      </li>
      ... more events here ...
    </ol>
  </div>
</div>

6. To generate a timeline slider from the HTML ordered list, just attach the function to the top container and done.

$(function(){
  $('#myTimeline').horizontalTimeline();
});

7. Config the timeline slider by overrideing the following options.

$('#myTimeline').horizontalTimeline({
  // date intervals for different devices.
  // minimum: 120
  desktopDateIntervals: 200, 
  tabletDateIntervals: 150,
  mobileDateIntervals: 120,
  minimalFirstDateInterval: true,
    
  // display type: dateTime, date, time, dayMonth, monthYear, year
  dateDisplay: "dateTime", 
    
  // enable/disable autoplay
  autoplay: false,
  // autoplay speed in seconds
  autoplaySpeed: 8,
  // pause hover
  autoplayPause_onHover: false, 
    
  // enable/disable mousewheel
  useScrollWheel: false,
  // enable/disable touchSwipe plugin
  useTouchSwipe: true,
  // enable/disable keyboard interactions
  useKeyboardKeys: false,
  // auto load required resources
  addRequiredFile: true,
  // Font Awesome icons
  useFontAwesomeIcons: true,
  iconBaseClass: "fas fa-3x", 
  scrollLeft_iconClass: "fa-chevron-circle-left",
  scrollRight_iconClass: "fa-chevron-circle-right", 
  prev_iconClass: "fa-arrow-circle-left",
  next_iconClass: "fa-arrow-circle-right",  
  pause_iconClass: "fa-pause-circle",
  play_iconClass: "fa-play-circle"
});

8. API methods.

// add new event
var html = '<li data-date="02/02/2020">Event Here.</li>';
$('#myTimeline').horizontalTimeline('addEvent', html, 'after', '01/01/2020');
$('#myTimeline').horizontalTimeline('addEvent', html, 'before', '03/03/2020');
// remove event
$('#myTimeline').horizontalTimeline('removeEvent', '02/02/2020');
// refresh the timeline
$('#myTimeline').horizontalTimeline('refresh');
// destroy the timeline
$('#myTimeline').horizontalTimeline('destroy');

This awesome jQuery plugin is developed by yCodeTech. For more Advanced Usages, please check the demo page or visit the official website.