Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ilkeryilmaz/timelinejs
🎬 jQuery timeline plugin, easily creates timeline slider.
https://github.com/ilkeryilmaz/timelinejs
chronology jquery-plugin jquery-timeline jquery-timeline-plugin milestone timeline
Last synced: about 1 month ago
JSON representation
🎬 jQuery timeline plugin, easily creates timeline slider.
- Host: GitHub
- URL: https://github.com/ilkeryilmaz/timelinejs
- Owner: ilkeryilmaz
- Created: 2016-12-24T19:59:22.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-05-29T02:07:56.000Z (over 4 years ago)
- Last Synced: 2024-07-05T14:53:30.555Z (2 months ago)
- Topics: chronology, jquery-plugin, jquery-timeline, jquery-timeline-plugin, milestone, timeline
- Language: JavaScript
- Homepage: https://ilkeryilmaz.github.io/timelinejs/
- Size: 1.65 MB
- Stars: 882
- Watchers: 37
- Forks: 119
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://bower.io/) and [NPM](https://www.npmjs.com/package/timelinejs-slider) and can be installed using the following commands.
```shell
bower install timelinejs-slider
```
```shell
npm install timelinejs-slider
```
#### 1.2. The Basics
Include the jQuery library and plugin:
```html
```
Include the plugin css file:
```html
```
Html markup:
```html
your content or markup
your content or markup
your content or markup
your content or markup
your content or markup
```
Start plugin:
```js
$(function(){
$('.js-timeline').Timeline();
});
```
## Options
_Available options listed below._
```js
$('.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~~.)