Responsive Horizontal/Vertical Timeline Plugin For jQuery

A responsive, flexible, animated, scrollable and high-performance jQuery (Vanilla JavaScript) timeline plugin that automatically switches between horizontal and vertical layouts depending on the current screen size. 

1. To use the Timeline.js as a jQuery plugin, load the following JavaScript and CSS files into your page which has jQuery library loaded.

<link href="css/timeline.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="js/timeline.min.js"></script>

2. Add your own stories to the timeline following the markup structure as follows:

<div class="timeline">
  <div class="timeline__wrap">
    <div class="timeline__items">
      <div class="timeline__item">
        <div class="timeline__content">
          <h2>2018</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus. Lorem
            ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.</p>
        </div>
      </div>
      <div class="timeline__item">
        <div class="timeline__content">
          <h2>2017</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.</p>
        </div>
      </div>
      <div class="timeline__item">
        <div class="timeline__content">
          <h2>2016</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.</p>
        </div>
      </div>
      ...
    </div>
  </div>
</div>

3. Initialize the timeline.js plugin to create a vertical timeline on the page.

$(function(){
  jQuery('.timeline').timeline();
});

4. Change the default layout to 'horizontal'.

jQuery('.timeline').timeline({
  mode: 'horizontal'
});

5. Specify the screen size at which breakpoint the horizontal timeline should swtich to the 'Vertical' layout.

jQuery('.timeline').timeline({
  mode: 'horizontal',
  forceVerticalMode: 600 // 600px
});

6. Specify the alignment of the first item when the timline is in the 'Vertical' mode.

jQuery('.timeline').timeline({
  verticalStartPosition: 'left'
});

7. Specify the max number of stories to display at a time.

jQuery('.timeline').timeline({
  mode: 'horizontal',
  visibleItems: 3
});

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