Animated Timeline Slider Plugin For jQuery - Timeline.js

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.

<link href="timeline.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="timeline.js"></script>

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

<div class="timeline timeline-demo">
  <div data-time="2012">
    <div class="timeline-visual"> <img src="1.jpg" alt=""> </div>
    <div class="timeline-detail">
      <ul class="timeline-detail-list">
        <li>Description</li>
      </ul>
    </div>
  </div>
  <div data-time="2013">
    <div class="timeline-visual"> <img src="2.jpg" alt=""> </div>
    <div class="timeline-detail">
      <ul class="timeline-detail-list">
        <li>Description</li>
      </ul>
    </div>
  </div>
  <div data-time="2014">
    <div class="timeline-visual"> <img src="3.jpg" alt=""> </div>
    <div class="timeline-detail">
      <ul class="timeline-detail-list">
        <li>Description</li>
      </ul>
    </div>
  </div>
  <div data-time="2015">
    <div class="timeline-visual"> <img src="4.jpg" alt=""> </div>
    <div class="timeline-detail">
      <ul class="timeline-detail-list">
        <li>Description</li>
      </ul>
    </div>
  </div>
  <div data-time="2016">
    <div class="timeline-visual"> <img src="5.jpg" alt=""> </div>
    <div class="timeline-detail">
      <ul class="timeline-detail-list">
        <li>Description</li>
      </ul>
    </div>
  </div>
  <div data-time="2017">
    <div class="timeline-visual"> <img src="6.jpg" alt=""> </div>
    <div class="timeline-detail">
      <ul class="timeline-detail-list">
        <li>Description</li>
      </ul>
    </div>
  </div>
</div>

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

$('.timeline-demo').Timeline();

4. Possible options for the timeline slider.

$('.timeline-demo').Timeline({
  // GENERAL
  mode: 'horizontal', // vertical
  itemClass: 'timeline-item',
  dotsClass: 'timeline-dots',
  activeClass: 'slide-active',
  prevClass: 'slide-prev',
  nextClass: 'slide-next',
  startItem: 'first', // first|last|number
  dotsPosition: 'bottom', // bottom | top

  // CONTROLS
  customPaging: function(slider, date) {
    return $('<button type="button" role="button" />').text(date);
  },
});

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.