ilkeryilmaz / Timelinejs
🎬 jQuery timeline plugin, easily creates timeline slider.
Stars: ✠788
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Timelinejs
jquery-linechart
JQuery plugin for creating charts
Stars: ✠42 (-94.67%)
Mutual labels: jquery-plugin, timeline
Timespace
A jQuery plugin to handle displaying of time events
Stars: ✠27 (-96.57%)
Mutual labels: jquery-plugin, timeline
Jquery Smartwizard
The awesome jQuery step wizard plugin
Stars: ✠635 (-19.42%)
Mutual labels: jquery-plugin
Yadcf
Yet Another DataTables Column Filter (yadcf)
Stars: ✠692 (-12.18%)
Mutual labels: jquery-plugin
Isinviewport
An ultra-light jQuery plugin that tells you if an element is in the viewport but with a twist.
Stars: ✠646 (-18.02%)
Mutual labels: jquery-plugin
Animatescroll.js
A Simple jQuery Plugin for Animating Scroll
Stars: ✠708 (-10.15%)
Mutual labels: jquery-plugin
Opentimelineio
Open Source API and interchange format for editorial timeline information.
Stars: ✠777 (-1.4%)
Mutual labels: timeline
Selectpage
A simple style and powerful selector, including ajax remote data, autocomplete, pagination, tags, i18n and keyboard navigation features
Stars: ✠679 (-13.83%)
Mutual labels: jquery-plugin
Octocard
Highly flexible github info card for every github lover. [This project is deprecated.]
Stars: ✠742 (-5.84%)
Mutual labels: timeline
Rowgrid.js
A small, lightweight JavaScript plugin for placing items in straight rows (jQuery and vanilla JS version) – Demo:
Stars: ✠670 (-14.97%)
Mutual labels: jquery-plugin
Jquery Upload File
jQuery Upload File plugin provides Multiple file Uploads with progress bar.Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.
Stars: ✠650 (-17.51%)
Mutual labels: jquery-plugin
Jquery Selectric
jQuery plugin for easy manipulation and customization of HTML selects
Stars: ✠724 (-8.12%)
Mutual labels: jquery-plugin
React Vertical Timeline
Vertical timeline for React.js
Stars: ✠637 (-19.16%)
Mutual labels: timeline
Jquery Drawsvg
Lightweight, simple to use jQuery plugin to animate SVG paths
Stars: ✠759 (-3.68%)
Mutual labels: jquery-plugin
Form2js
Javascript library for collecting form data
Stars: ✠630 (-20.05%)
Mutual labels: jquery-plugin
Stupid Table Plugin
A stupidly small and simple jQuery table sorter plugin
Stars: ✠704 (-10.66%)
Mutual labels: jquery-plugin
Tableexport
The simple, easy-to-implement library to export HTML tables to xlsx, xls, csv, and txt files.
Stars: ✠781 (-0.89%)
Mutual labels: jquery-plugin
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
- [x]
Basic plugin - [x]
Demo page and documentation - [ ] Migrate ES6
- [ ] Mouse drag and touch support
- [ ] Mobile support
- [ ] Next/prev button
- [ ] Advanced features (date slider,
autoplay.)
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].