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

1. Include jQuery:

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

2. Include plugin's code:

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

3. 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', 	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

eventTemplate

Allows you to customize the event template. Use ####DATE### and ####CONTENT### as tokens to show the events date and content.

Contributing

Check CONTRIBUTING.md for more information.

License

MIT License © Stefano Marra