timeline.js是一款jQuery时间轴幻灯片插件

timeline.js是一款jQuery时间轴幻灯片插件。通过timeline.js插件，你可以很容易的制作出水平或垂直时间轴效果，并可以像幻灯片一样前后切换时间点。

JavaScript 时间轴

访问GitHub主页

共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

推荐源码

暂无源码更多源码...