
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.
- Publication date: 26.03.2018
- Source