Slider-style Simple jQuery Timeline Plugin

A simple jQuery plugin to create a horizontal timeline that displays details of your events in a content slider allowing to switch between these events through next/prev arrows.

How to use it:

1. Load the simple-timeline.css in the head section, and the simple-timeline.jquery.js in the footer but after jQuery library.

<link href="css/simple-timeline.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="simple-timeline.jquery.js"></script>

2. Create the Html for the horizontal timeline.

<button class="yselect" id="yprev">&lt;</button>
<p class="currentYear">0</p>
<button class="yselect" id="ynext">&gt;</button>
<div class="dateRight">
  <p class="currentDate">0</p>
</div>
<div id="timelineWrap">
  <div class="months">
    <div class="monthLine firstlast" style="left: 0px"></div>
    <div class="monthLine" style="left: 70.833px"></div>
    <div class="monthLine" style="left: 140.666px"></div>
    <div class="monthLine" style="left: 210.999px"></div>
    <div class="monthLine" style="left: 281.332px"></div>
    <div class="monthLine" style="left: 351.665px"></div>
    <div class="monthLine" style="left: 421.998px"></div>
    <div class="monthLine" style="left: 492.331px"></div>
    <div class="monthLine" style="left: 562.664px"></div>
    <div class="monthLine" style="left: 632.997px"></div>
    <div class="monthLine" style="left: 703.33px"></div>
    <div class="monthLine" style="left: 773.663px"></div>
    <div class="monthLine firstlast" style="left: 849px"></div>
  </div>
</div>

3. Add your events into the timeline as follows.

<div id="contentWrap">
  <div class="dbuttons">
    <button class="dselect" id="dprev"><</button>
  </div>
  <div class="tlcontainer" data-date="2012-03-12"> Event 1 </div>
  <div class="tlcontainer" data-date="2012-08-01"> Event 2 </div>
  <div class="tlcontainer" data-date="2012-10-08"> Event 3 </div>
  <div class="dbuttons">
    <button class ="dselect" id="dnext">></button>
  </div>
</div>

4. Initialize the timeline.

$('.tlcontainer').simpleTimeline();

5. Available options.

$('.tlcontainer').simpleTimeline({

content: $('div.tlcontainer'),
hoverTrans: {
  trans: 'fadeToggle',
  transIn: 300,
  transOut: 300,
},
startDate: 1,
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

});

---

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