Script link

q4.timeline.1.0.3.min.js

Source file

q4.timeline.js, line 2

Requires

• Mustache.js
• Slick
• Slick CSS

Options

content Object

An array of event groups. Each group has these properties: - `heading` The heading for the category. - `text` Text to display for the category. - `items` An array of items with these properties: - `heading` The heading for the event. - `cssClass` An optional CSS class to use in the template. - `text` Text to display for the event.

Example

[
    {
        heading: '1980s',
        text: 'Many things happened in the 1980s.',
        items: [
            {
                heading: 1981,
                cssClass: 'green',
                text: 'This is the first thing.'
            },
            {
                heading: 1985,
                cssClass: 'blue',
                text: 'This is the second thing.'
            }
        ]
    },
    {
        heading: '2000s',
        cssClass: 'red',
        items: [
            {
                heading: 'January 1, 2000',
                text: 'In the year 2000, everything changed.'
            }
        ]
    }
]

navCarousel boolean

Whether to render a navigation carousel. This is generally used to display the groups.

Default value

false

navContainer string

A selector for the navigation carousel.

Default value

.timeline-nav

navTemplate string

A Mustache template to use for the navigation carousel. All properties from `content` are available as tags.

Example

'{{#groups}}' +
'<li class="{{cssClass}}">' +
    '<h3>{{heading}}</h3>' +
    '{{{text}}}' +
'</li>' +
'{{/groups}}'

navSelector string

A selector for each group's slide in the navigation carousel. When clicked, this will move the main carousel to that group.

Default value

li

navOptions Object

Options to pass directly to the nav carousel's Slick object. See Slick's documentation for details.

mainCarousel boolean

Whether to render a main carousel. This is generally used to display the individual timeline items.

Default value

true

mainContainer string

A selector for the main carousel.

Default value

.timeline-main

mainTemplate string

A Mustache template to use for the main carousel. All properties from `content` are available as tags. Items also have a {{group}} tag with the index # of their containing group.

Example

'{{#items}}' +
'<li class="{{cssClass}}" data-group="{{group}}">' +
    '<h3>{{heading}}</h3>' +
    '<div class="itemtext">{{{text}}}</div>' +
'</li>' +
'{{/items}}'

mainSelector string

A selector for each item's slide in the main carousel. When clicked, this will move the nav carousel to this item's group.

Default value

li

mainOptions Object

Options to pass directly to the main carousel's Slick object. See Slick's documentation for details.

afterNavChange function

A callback fired after a change in the nav carousel.

Parameters

event Event

The triggering event.

data Object

A data object with these properties: - `element` The nav carousel's jQuery element. - `target` The index of the target group.

afterMainChange function

A callback fired after a change in the main carousel.

Parameters

event Event

The triggering event.

data Object

A data object with these properties: - `element` The main carousel's jQuery element. - `target` The index of the target timeline item.

complete function

A callback fired after rendering is complete.

Parameters

event Event

The triggering event.