项目作者: ilkeryilmaz

项目描述 :
🎬 jQuery timeline plugin, easily creates timeline slider.
高级语言: JavaScript
项目地址: git://github.com/ilkeryilmaz/timelinejs.git
创建时间: 2016-12-24T19:59:22Z
项目社区:https://github.com/ilkeryilmaz/timelinejs

开源协议:

下载


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.

  1. bower install timelinejs-slider
  1. npm install timelinejs-slider

1.2. The Basics

Include the jQuery library and plugin:

  1. <script src="js/jquery.min.js"></script> <!-- >=1.11.2 -->
  2. <script src="js/timeline.min.js"></script>

Include the plugin css file:

  1. <link rel="stylesheet" href="css/timeline.css">

Html markup:

  1. <div class="timeline-container timeline-theme-1">
  2. <div class="timeline js-timeline">
  3. <div data-time="2017">your content or markup</div>
  4. <div data-time="2016">your content or markup</div>
  5. <div data-time="2015">your content or markup</div>
  6. <div data-time="2014">your content or markup</div>
  7. <div data-time="2013">your content or markup</div>
  8. </div>
  9. </div><!-- /.timeline-container -->

Start plugin:

  1. $(function(){
  2. $('.js-timeline').Timeline();
  3. });

Options

Available options listed below.

  1. $('.timeline').Timeline({
  2. autoplay: false,
  3. // value: boolean | Enables Autoplay
  4. autoplaySpeed: 3000,
  5. // value: integer | Autoplay Speed in milliseconds
  6. mode: 'horizontal',
  7. // value: horizontal | vertical, default to horizontal
  8. itemClass: 'timeline-item',
  9. // value: item class
  10. dotsClass: 'timeline-dots',
  11. // value: dots item class
  12. activeClass: 'slide-active',
  13. // value: item and dots active class
  14. prevClass: 'slide-prev',
  15. // value: item and dots prev class
  16. nextClass: 'slide-next',
  17. // value: item and dots next class
  18. startItem: 'first', // first|last|number
  19. // value: first | last | number , default to first
  20. dotsPosition: 'bottom',
  21. // value: bottom | top, default to bottom
  22. pauseOnHover: true,
  23. // value: boolean | Pause Autoplay On Hover
  24. pauseOnDotsHover: false,
  25. // value: boolean | Pause Autoplay when a dot is hovered
  26. });

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