jQuery timeline plugin, easily creates a timeline.
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-slidernpm install timelinejs-sliderInclude 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();
});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
});https://ilkeryilmaz.github.io/timelinejs/
-
Basic plugin -
Demo page and documentation - Migrate ES6
- Mouse drag and touch support
- Mobile support
- Next/prev button
- Advanced features (date slider,
autoplay.)