Responsive Horizontal/Vertical Timeline In Vanilla JavaScript – timeline.js

Category: Date & Time , Javascript | April 10, 2018
Author: squarechip
Views Total: 68
Official Page: Go to website
Last Update: April 10, 2018
License: MIT

Preview:

Responsive Horizontal/Vertical Timeline In Vanilla JavaScript – timeline.js

Description:

timeline.js is a vanilla JavaScript plugin to render a responsive, horizontal/vertical timeline component from plain HTML.

Note: the component also can be implemented as a jQuery plugin, See Responsive Horizontal/Vertical Timeline Plugin For jQuery.

How to use it:

Place the timeline.js’ files into the html document.

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

The required HTML for the timeline.

<div class="timeline">
  <div class="timeline__wrap">
    <div class="timeline__items">
      <div class="timeline__item">
        <div class="timeline__content">
          <h2>2018.3</h2>
          <p>Story 1</p>
        </div>
      </div>
      <div class="timeline__item">
        <div class="timeline__content">
          <h2>2017.5</h2>
          <p>Story 2</p>
        </div>
      </div>
      <div class="timeline__item">
        <div class="timeline__content">
          <h2>2016</h2>
          <p>Story 3</p>
        </div>
      </div>
      ...
    </div>
  </div>
</div>

Initialize the timeline.js and done.

timelineApp(document.querySelectorAll('.timeline'));

By default, the plugin will render a vertical timeline on the page. To change the mode to ‘horizontal’, follow this step.

timelineApp(document.querySelectorAll('.timeline'), {
  mode: 'horizontal'
});

If you’re using the horizontal mode, the timeline will automatically switch to ‘Vertical’ mode when the screen size is too small to fit the timeline. To change the default breakpoint, follow this step:

timelineApp(document.querySelectorAll('.timeline'), {
  mode: 'horizontal',
  forceVerticalWidth: 800
});

You can also specify how many items to display at a time.

timelineApp(document.querySelectorAll('.timeline'), {
  mode: 'horizontal',
  visibleItems: 4,
  forceVerticalWidth: 800
});

When using the ‘Vertical’ mode, you can choose the alignment of the first item.

timelineApp(document.querySelectorAll('.timeline'), {
  verticalStartPosition: 'left' // or right
});

You can also config the timeline via the following data attributes when you have multiple instances on the page.

<div class="timeline" data-option-name="value">
  ...
</div>

Leave a Reply