Interactive Timeline Slider In jQuery - Horizontal Timeline

Interactive Timeline Slider In jQuery - Horizontal Timeline
File Size: 34.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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", 

  // normal, reverse
  dateOrder: "normal",
    
  // 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,

  // enable nav buttons
  useNavBtns: true,

  // enable scroll buttons
  useScrollBtns: 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');

Changelog:

2019-09-28

  • Added: A proper getMonthName function to make it easier to the event creation.
  • Added: Some CSS to style the text as the default in the event content.
  • Added: dateOrder option to reverse the order of the date display.
  • Changed: Renamed buttonDisable to buttonStates to reflect the docs naming.
  • Changed: Some CSS rules that affected the scrollbars.
  • Fixed: The useFontAwesomeIcons option where it wouldn't do anything due to missing code.
  • Fixed: A bug that inconsistently and inaccurately calculates the width of the timeline on init, so the scrolling of the timeline was off slightly. (This was due to the function being called slightly before all elements had to chance to be created). Fixed with a 300s delay.
  • Fixed: A bug that when the buttons are disiabled, the timeline appears to not to have a width and disappeared.
  • Fixed: A persistant bug that shows the horizontal (x) scrollbar when translating the event content, added a line in the CSS.
  • Fixed: A bug that broke multiple timelines by using the nav buttons that stored the wrong timeline instance when TouchSwipe was used.
  • Removed: Removed some unnecessary commented out code in the Refresh method.

2019-07-25

  • Added more options

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