jQuery Timelinr - Créer un slider de timeline avancé avec jQuery

jQuery Timelinr est un plugin jQuery permettant de créer une frise chronologique sous forme de slider dynamique.

Présenter les dates clés d'un projet, d'une entreprise... sur son site n'est jamais chose aisée.

Grâce à Timelinr, vous aurez la possibilité de créer en quelques lignes de code jQuery un slider dynamique pour associer vos dates à un contenu.

La navigation se fait très facilement entre les dates avec un effet de transition sympa qui donnera tout de suite du style à votre frise chronologique.

Le plugin dispose d'une multitude d'options pour personnaliser votre slider à votre guise, comme l'orientation horizontale ...

$(function(){
      $().timelinr({
         orientation: 'horizontal',
         // value: horizontal | vertical, default to horizontal
         containerDiv: '#timeline',
         // value: any HTML tag or #id, default to #timeline
         datesDiv: '#dates',
         // value: any HTML tag or #id, default to #dates
         datesSelectedClass: 'selected',
         // value: any class, default to selected
         datesSpeed: 500,
         // value: integer between 100 and 1000 (recommended), default to 500 (normal)
         issuesDiv : '#issues',
         // value: any HTML tag or #id, default to #issues
         issuesSelectedClass: 'selected',
         // value: any class, default to selected
         issuesSpeed: 200,
         // value: integer between 100 and 1000 (recommended), default to 200 (fast)
         issuesTransparency: 0.2,
         // value: integer between 0 and 1 (recommended), default to 0.2
         issuesTransparencySpeed: 500,
         // value: integer between 100 and 1000 (recommended), default to 500 (normal)
         prevButton: '#prev',
         // value: any HTML tag or #id, default to #prev
         nextButton: '#next'
         // value: any HTML tag or #id, default to #next
      });
   });

Et côté HTML, il suffit de définir vos contenus et dates associées:

<div id="timeline">
   <ul id="dates">
      <li><a href="#" class="selected">date1</a></li>
      <li><a href="#">date2</a></li>
   </ul>
   <ul id="issues">
      <li id="date1" class="selected">
         <p>Lorem ipsum.</p>
      </li>
      <li id="date2">
         <p>Lorem ipsum.</p>
      </li>
   </ul>
   <a href="#" id="next">+</a> <!-- option -->
   <a href="#" id="prev">-</a> <!-- option -->
</div>

Sympa non ?

Site Officiel