timeline.js是一款jQuery时间轴幻灯片插件
timeline.js是一款jQuery时间轴幻灯片插件。通过timeline.js插件,你可以很容易的制作出水平或垂直时间轴效果,并可以像幻灯片一样前后切换时间点。
JavaScript 时间轴
共779Star
详细介绍
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 - Migrate ES6
- Mouse drag and touch support
- Mobile support
- Next/prev button
- Advanced features (date slider,
autoplay.)