🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

jQuery timeline plugin, easily creates a timeline.

Plugins

Documentation

jQuery Timeline Plugin

jQuery timeline plugin, easily creates a timeline.

screenshoot

Getting Started

1.1. Installation with Package Managers

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

1.2. The Basics

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.)

You May Also Like