Jquery-roadmap NPM

jQuery Roadmap

Another timeline jquery plugin. This plugin was custom made for another project and then separated.

Install

NPM: npm install jquery-roadmap
CDN: jsdelivr.com

<script src="https://cdn.jsdelivr.net/npm/jquery-roadmap@1/dist/jquery.roadmap.min.js"></script>

Download: zip

Usage

Include jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Include plugin's code:

<script src="dist/jquery.roadmap.min.js"></script>

Call the plugin:

$("#my-roadmap").roadmap(data, options);

Parameters

Data

First parameter is an array of objects with the following structure:

var data = [
	{
		date: 'Q1 - 2018',
		content: 'Lorem ipsum dolor sit amet'
	},
	{
		date: 'Q2 - 2018',
		content: 'Lorem ipsum dolor sit amet'
	},
	{
		date: 'Q3 - 2018',
		content: 'Lorem ipsum dolor sit amet'
	},
	{
		date: 'Q4 - 2018',
		content: 'Lorem ipsum dolor sit amet'
	}
];

Options

Second parameter is an object of properties used to customize the timeline. Here's a list of all properties and it's default values:

$("#my-roadmap").roadmap(data, {
	eventsPerSlide: 6,
	slide: 1,
	rootClass: 'roadmap',
	prevArrow: 'prev',
	nextArrow: 'next',
	orientation: 'auto',
	onBuild: function() {
		console.log('on build event');
	},
	eventTemplate: '<div class="event">' +
			'<div class="event__date">####DATE###</div>' +
			'<div class="event__content">####CONTENT###</div>' +
		'</div>'
});

eventsPerSlide

Sets the number of events per slide.
Default value: 6

slide

Sets the slide to show after initialization.
Default value: 1

rootClass

Allows you to change the css root class.
Default value: roadmap

prevArrow

Allows you to customize the "Previous" arrow. HTML is allowed.
Default value: prev

nextArrow

Allows you to customize the "Next" arrow. HTML is allowed.
Default value: next

orientation

Allows you to force the timeline orientation only to horizontal or vertical. Possible values are: horizontal, vertical and auto.
Default value: auto