
Yet another timeline slider plugin with jQuery that dynamically displays events in a responsive, scrollable, horizontal/vertical slider with a subtle fadeIn animation.
The timeline slider will automatically change the direction based on the current screen size. Compatible with Desktop and mobile.
More timeline sliders:
How to use it:
1. Include jQuery Timeline plugin's CSS in the header of the webpage.
<link href="jquery.timeline.min.css" rel="stylesheet">
2. Create a placeholder element in which you want to render the timeline slider.
<div id="my-timeline"></div>
3. Include jQuery library and the jQuery Timeline plugin's JavaScript at the bottom of the webpage.
<!-- Include jQuery --> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"> </script> <!-- Include jQuery Timeline Plugin --> <script src="jquery.timeline.js" type="text/javascript"></script>
4. Create an array of events object for the timeline sldier.
var myEvents = [{ date: 'Q1 - 2017', content: 'Lorem ipsum dolor sit amet' },{ date: 'Q2 - 2017', content: 'Lorem ipsum dolor sit amet' },{ date: 'Q3 - 2017', content: 'Lorem ipsum dolor sit amet' }, // ... { date: 'Q3 - 2018', content: 'Lorem ipsum dolor sit amet' } ];
5. Initialize the plugin to present the events on the timeline slider.
$('#my-timeline').timeline(myEvents);
6. Specify how many events to show in the same slide.
$('#my-timeline').timeline(myEvents,{ eventsPerSlide: 5 // default: 6 });
7. Specify the initial slide.
$('#my-timeline').timeline(myEvents,{ slide: 2 // default: 1 });
8. Customize the prev/next navigation.
$('#my-timeline').timeline(myEvents,{ // default: 'prev' prevArrow: '<i class="material-icons">keyboard_arrow_left</i>', // default: 'next' nextArrow: '<i class="material-icons">keyboard_arrow_right</i>' });
9. The default event template.
$('#my-timeline').timeline(myEvents,{ eventTemplate: '<li class="timeline__events__event">' + '<div class="event">' + '<div class="event__date">####DATE###</div>' + '<div class="event__content">####CONTENT###</div>' + '</div>' + '</li>', });
This awesome jQuery plugin is developed by stefanomarra. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 19.06.2018
- Source