
A jQuery plugin to create a dynamic, interactive, responsive, touch-friendly, SEO-friendly timeline that makes it possible to displays event data in a horizontal slider interface.
More features:
- Custom date intervals for desktop/tablet/mobile.
- Custom display mode: dateTime, date, time, dayMonth, monthYear, year.
- Automatically slides through event data.
- Allows to slide through events with mouse drag, touch swipe, keyboard arrows, mouse wheel, etc.
- Font Awesome based navigation controls.
- Search engine friendly. Based on the HTML ordered list.
See also:
How to use it:
1. Include jQuery library together with the Horizontal Timeline plugin's files on the html page.
<link rel="stylesheet" href="/path/to/horizontal_timeline.2.0.min.css"> <script src="/path/to/jquery.min.js"></script> <script src="/path/to/horizontal_timeline.2.0.min.js"></script>
2. Include the jQuery touchSwipe plugin for the support of touch gestures. REQUIRED if the addRequiredFile
is set to false
(See Below).
<script src="/path/to/jquery.touchSwipe.min.js"></script> <!-- Or from a CDN --> <script src="https://unpkg.com/[email protected]/jquery.touchSwipe.min.js"></script>
3. Include the jQuery mousewheel plugin for the support of mouse wheel. REQUIRED if the addRequiredFile
is set to false
(See Below).
<script src="/path/to/jquery.touchSwipe.min.js"></script> <!-- Or from a CDN --> <script src="https://unpkg.com/[email protected]/jquery.touchSwipe.min.js"></script>
4. Include the Font Awesome Iconic Font for the navigation controls.
<link rel="stylesheet" href="/path/to/fontawesome.min.css">
5. Add the timeline events to an HTML ordered list and specify the Datetime in the data-date
attribute. The selected
CSS class is used to display the event on init.
<div class="horizontal-timeline" id="myTimeline"> <div class="events-content"> <ol> <li class="selected" data-date="11/02/2012"> Event 1 </li> <li data-date="12/06/2015"> Event 2 </li> <li data-date="08/06/2019"> Event 3 </li> ... more events here ... </ol> </div> </div>
6. To generate a timeline slider from the HTML ordered list, just attach the function to the top container and done.
$(function(){ $('#myTimeline').horizontalTimeline(); });
7. Config the timeline slider by overrideing the following options.
$('#myTimeline').horizontalTimeline({ // date intervals for different devices. // minimum: 120 desktopDateIntervals: 200, tabletDateIntervals: 150, mobileDateIntervals: 120, minimalFirstDateInterval: true, // display type: dateTime, date, time, dayMonth, monthYear, year dateDisplay: "dateTime", // enable/disable autoplay autoplay: false, // autoplay speed in seconds autoplaySpeed: 8, // pause hover autoplayPause_onHover: false, // enable/disable mousewheel useScrollWheel: false, // enable/disable touchSwipe plugin useTouchSwipe: true, // enable/disable keyboard interactions useKeyboardKeys: false, // auto load required resources addRequiredFile: true, // Font Awesome icons useFontAwesomeIcons: true, iconBaseClass: "fas fa-3x", scrollLeft_iconClass: "fa-chevron-circle-left", scrollRight_iconClass: "fa-chevron-circle-right", prev_iconClass: "fa-arrow-circle-left", next_iconClass: "fa-arrow-circle-right", pause_iconClass: "fa-pause-circle", play_iconClass: "fa-play-circle" });
8. API methods.
// add new event var html = '<li data-date="02/02/2020">Event Here.</li>'; $('#myTimeline').horizontalTimeline('addEvent', html, 'after', '01/01/2020'); $('#myTimeline').horizontalTimeline('addEvent', html, 'before', '03/03/2020'); // remove event $('#myTimeline').horizontalTimeline('removeEvent', '02/02/2020'); // refresh the timeline $('#myTimeline').horizontalTimeline('refresh'); // destroy the timeline $('#myTimeline').horizontalTimeline('destroy');
This awesome jQuery plugin is developed by yCodeTech. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 10.06.2019
- Source