Animated Timeline Slider Plugin For jQuery Timeline js - Download Animated Timeline Slider Plugin For jQuery - Timeline.js

Download Animated Timeline Slider Plugin For jQuery – Timeline.js

By Posted on

This time I will share jQuery Plugin and tutorial about Animated Timeline Slider Plugin For jQuery – Timeline.js, hope it will help you in programming stack.

Animated Timeline Slider Plugin For jQuery Timeline js - Download Animated Timeline Slider Plugin For jQuery - Timeline.js
File Size: 1.61 MB
Views Total: 9074
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Yet another jQuery timeline plugin used for creating an interactive horizontal (or vertical) timeline slider to describe a sequence of events. Your users are able to navigate between timeline events just like a slider. Mobile compatibility, date timeline slider, autoplay and navigation buttons are coming soon.

How to use it:

1. Load the required JavaScript and CSS files as displayed below into your html document.

view source
1 <link href="timeline.css" rel="stylesheet">
2 <script src="//code.jquery.com/jquery.min.js"></script>
3 <script src="timeline.js"></script>

2. Add your custom events to the timeline slider following the html structure as this:

view source
01 <div class="timeline timeline-demo">
02   <div data-time="2012">
03     <div class="timeline-visual"> <img src="1.jpg" alt=""> </div>
04     <div class="timeline-detail">
05       <ul class="timeline-detail-list">
06         <li>Description</li>
07       </ul>
08     </div>
09   </div>
10   <div data-time="2013">
11     <div class="timeline-visual"> <img src="2.jpg" alt=""> </div>
12     <div class="timeline-detail">
13       <ul class="timeline-detail-list">
14         <li>Description</li>
15       </ul>
16     </div>
17   </div>
18   <div data-time="2014">
19     <div class="timeline-visual"> <img src="3.jpg" alt=""> </div>
20     <div class="timeline-detail">
21       <ul class="timeline-detail-list">
22         <li>Description</li>
23       </ul>
24     </div>
25   </div>
26   <div data-time="2015">
27     <div class="timeline-visual"> <img src="4.jpg" alt=""> </div>
28     <div class="timeline-detail">
29       <ul class="timeline-detail-list">
30         <li>Description</li>
31       </ul>
32     </div>
33   </div>
34   <div data-time="2016">
35     <div class="timeline-visual"> <img src="5.jpg" alt=""> </div>
36     <div class="timeline-detail">
37       <ul class="timeline-detail-list">
38         <li>Description</li>
39       </ul>
40     </div>
41   </div>
42   <div data-time="2017">
43     <div class="timeline-visual"> <img src="6.jpg" alt=""> </div>
44     <div class="timeline-detail">
45       <ul class="timeline-detail-list">
46         <li>Description</li>
47       </ul>
48     </div>
49   </div>
50 </div>

3. Initialize the timeline slider and you’re done.

view source
1 $('.timeline-demo').<a href="https://www.jqueryscript.net/tags.php?/Timeline/">Timeline</a>();

4. Possible options for the timeline slider.

view source
01 $('.timeline-demo').Timeline({
02   // GENERAL
03   mode: 'horizontal', // vertical
04   itemClass: 'timeline-item',
05   dotsClass: 'timeline-dots',
06   activeClass: 'slide-active',
07   prevClass: 'slide-prev',
08   nextClass: 'slide-next',
09   startItem: 'first', // first|last|number
10   dotsPosition: 'bottom', // bottom | top
11  
12   // CONTROLS
13   customPaging: function(slider, date) {
14     return $('<button type="button" role="button" />').text(date);
15   },
16 });

Change log:

2017-05-28

  • Added AutoPlay

2017-05-02

  • Remove object definition and remove file space

This awesome jQuery plugin is developed by ilkeryilmaz. For more Advanced Usages, please check the demo page or visit the official website.

source : jqueryscript.net

Related posts: