JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Latest commit c776dcb May 28, 2017
Permalink
Failed to load latest commit information.
demo Update documentation May 28, 2017
dist Update production files May 28, 2017
src Added AutoPlay. May 28, 2017
.editorconfig Update dots files Apr 30, 2017
.gitignore Update gitignore Apr 15, 2017
README.md Update documentation May 28, 2017
bower.json Added bower install May 28, 2017
gulpfile.js Add dist task img path May 1, 2017
package.json Update documentation May 28, 2017

README.md

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.

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