node package manager

timelinejs-slider

jQuery Timeline Plugin

jQuery timeline plugin, easily creates a timeline.

screenshoot

Getting Started:

Timeline.js is now setup and ready to be used with Bower and NPM and can be installed using the following commands.

bower install timelinejs-slider
 
npm install timelinejs-slider

Include the jQuery library and plugin:

<script src="js/jquery.min.js"></script> <!-- >=1.11.2 -->
<script src="js/timeline.min.js"></script>

Include the plugin css file:

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

Html markup:

<div class="timeline-container timeline-theme-1">
  <div class="timeline js-timeline">
    <div data-time="2017">your content or markup</div>
    <div data-time="2016">your content or markup</div>
    <div data-time="2015">your content or markup</div>
    <div data-time="2014">your content or markup</div>
    <div data-time="2013">your content or markup</div>
  </div>
</div><!-- /.timeline-container -->

Start plugin:

$(function(){
  $('.js-timeline').Timeline();
});

Options:

Available options listed below.

$('.timeline').Timeline({
  autoplay: false,
  // value: boolean | Enables Autoplay 
  autoplaySpeed: 3000,
  // value: integer | Autoplay Speed in milliseconds 
  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 
  pauseOnHover: true,
  // value: boolean | Pause Autoplay On Hover 
  pauseOnDotsHover: false,
  // value: boolean | Pause Autoplay when a dot is hovered 
});

Demo

https://ilkeryilmaz.github.io/timelinejs/

Tasks

  • Basic plugin
  • Demo page and documentation
  • Mouse drag and touch support
  • Mobile support
  • Next/prev button
  • Advanced features (date slider, autoplay etc.)