Getting started
1. Include the plugin JavaScript file above the closing
</body> tag on your page
<script src="dist/js/timeline.min.js"></script>
2. Include the plugin CSS file in the
<head> section of your page
<link href="dist/css/timeline.min.css" rel="stylesheet" />
3. Add your HTML markup
<div class="timeline">
<div class="timeline__wrap">
<div class="timeline__items">
<div class="timeline__item">
<div class="timeline__content">
Your content / markup
</div>
</div>
<div class="timeline__item">
<div class="timeline__content">
Your content / markup
</div>
</div>
<div class="timeline__item">
<div class="timeline__content">
Your content / markup
</div>
</div>
</div>
</div>
</div>
4. Initialize the plugin
With JavaScript
timeline(document.querySelectorAll('.timeline'));
Or with jQuery if you have the jQuery library loaded
$('.timeline').timeline();
Horizontal timeline demo
A horizontal timeline with 4 visible items, which changes to the vertical mode at an 800px resolution.
2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
2015
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.
2014
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.
2012
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
2010
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
2007
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.
2004
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.
2002
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.
Initialize the plugin using one of the following:
timeline(document.querySelectorAll('.timeline'), {
forceVerticalMode: 800,
mode: 'horizontal',
visibleItems: 4
});
$('.timeline').timeline({
forceVerticalMode: 800,
mode: 'horizontal',
visibleItems: 4
});
timeline(document.querySelectorAll('.timeline'));
Or
$('.timeline').timeline();
And
<div class="timeline" data-mode="horizontal" data-force-vertical-mode="800" visible-items="4"> ... </div>
Vertical timeline demo
A vertical timeline with the first item aligned to the right and the elements set to come into view 150px from the bottom of the window
2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
2015
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.
2014
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.
2012
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.
2010
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
2007
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.
2004
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.
2002
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Initialize the plugin using one of the following:
timeline(document.querySelectorAll('.timeline'), {
verticalStartPosition: 'right',
verticalTrigger: '150px'
});
$('.timeline').timeline({
verticalStartPosition: 'right',
verticalTrigger: '150px'
});
timeline(document.querySelectorAll('.timeline'));
Or
$('.timeline').timeline();
And
<div class="timeline" data-vertical-start-position="right" data-vertical-trigger="150px"> ... </div>