Simple jQuery Timeline Plugin – Timelinr

Timelinr is a simple jQuery Timeline Plugin that makes it easy to create awesome timeline effects for your website. It supports horizontal and vertical layouts, and you can specify parameters for most attributes: speed, transparency, etc.

Some Recommended Code Pen Links:
https://codepen.io/knyttneve/pen/bgvmma

How to use it:

1. Include jQuery Library and Timelinr.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery.timelinr-0.9.52.js"></script>

2. Inicialize the plugin

    <script>
        $(function () {
            $().timelinr({
                autoPlay: 'true',
                autoPlayDirection: 'forward',
                startAt: 4
            })
        });
    </script>

3. Options with default values.

$(function(){
   $().timelinr({
      orientation: 'horizontal',
      // value: horizontal | vertical, default to horizontal

      containerDiv: '#timeline',
      // value: any HTML tag or #id, default to #timeline

      <a href="https://www.jqueryscript.net/time-clock/">date</a>sDiv: '#dates',
      // value: any HTML tag or #id, default to #dates

      datesSelectedClass: 'selected',
      // value: any class, default to selected

      datesSpeed: 'normal',
      // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to normal

      issuesDiv : '#issues',
      // value: any HTML tag or #id, default to #issues

      issuesSelectedClass: 'selected',
      // value: any class, default to selected

      issuesSpeed: 'fast',
      // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to 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

      arrowKeys: 'false',
      // value: true/false, default to false

      startAt: 1,
      // value: integer, default to 1 (first)

      autoPlay: 'false',
      // value: true | false, default to false

      autoPlayDirection: 'forward',
      // value: forward | backward, default to forward

      autoPlayPause: 2000
      // value: integer (1000 = 1 seg), default to 2000 (2segs)< });

   });

4. Markup

<div id="timeline">
    <ul id="dates">
        <li><a href="#1900">1900</a></li>
        <li><a href="#1944">1944</a></li>
        <li><a href="#1950">1950</a></li>
        <li><a href="#1971">1971</a></li>
        <li><a href="#1999">1999</a></li>
        <li><a href="#2001">2001</a></li>
        <li><a href="#2011">2011</a></li>
    </ul>
    <ul id="issues">
        <li id="1900">
            <img src="images/1.png" width="256" height="256" />
            <h1>1900</h1>
            <p>...</p>
        </li>
        <li id="1944">
            <img src="images/3.png" width="256" height="256" />
            <h1>1944</h1>
            <p>...</p>
        </li>
        <li id="1950">
            <img src="images/4.png" width="256" height="256" />
            <h1>1950</h1>
            <p>...</p>
        </li>
        <li id="1971">
            <img src="images/5.png" width="256" height="256" />
            <h1>1971</h1>
            <p>...</p>
        </li>
        <li id="1999">
            <img src="images/8.png" width="256" height="256" />
            <h1>1999</h1>
            <p>...</p>
        </li>
        <li id="2001">
            <img src="images/9.png" width="256" height="256" />
            <h1>2001</h1>
            <p>...</p>
        </li>
        <li id="2011">
            <img src="images/10.png" width="256" height="256" />
            <h1>2011</h1>
            <p>...</p>
        </li>
    </ul>
    <div id="grad_left"></div>
    <div id="grad_right"></div>
</div>

Document Links: https://www.jqueryscript.net/slider/Simple-jQuery-Timeline-Plugin-Timelinr.html