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

onBuild

Allows you to pass a callback function that will run after the build

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