You can easily create the horizontal timeline with two types by using this jQuery plugin.
// "disableLimitter" is default to "false", or if omit that too.
$('#myTimeline').Timeline({ disableLimitter: true })
<style>
/* If you want to insert margins before and after the sidebar string: */
.jqtl-side-index-item::before,
.jqtl-side-index-item::after {
width: 1em;
}
</style>
Since ver.2.1.0, the events with duplicate IDs cannot be added and an error will occur. And if you specify a unique ID, it will be added with that event ID. An ID is automatically generated as in the past when an event with an unspecified ID is added.
If you want to enable a custom theme, you need to change the theme name to something other than "default" and set various colors.
If user data is specified in the 4th argument of the method, the event data added in the 4th argument of the callback can be referenced, and if user data is not specified, the event data added in the 3rd argument of the callback can be referenced. The event data is an array with the issued event ID as the key and the event data object as the value.
$('#my-timeline').Timeline().Timeline('openEvent', (targetEvent, viewerContents) => {
// Called just before inserting content to the viewer for the timeline.
console.log( targetEvent, viewerContents )
// If return false at this function then you can skip default viewer rendering process
// built in this plugin.
return false
})