jQuery Timeline Plugin
jQuery timeline plugin, easily creates a timeline.
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.)