To get started, add the JS and CSS files to the document. The easiest way to do this is to add them via jsdilvr CDN. Otherwise, you can download them from our Github Repo.

// Add CSS via jsdilvr CDN
                    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/ycodetech/horizontal-timeline-2.0@2/css/horizontal_timeline.2.0.min.css">
                 
                    // Add jQuery 
    				<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
                    
                    // Add JS via jsdilvr CDN
                    <script src="https://cdn.jsdelivr.net/gh/ycodetech/horizontal-timeline-2.0@2/JavaScript/horizontal_timeline.2.0.min.js"></script>
                

Unlike the original, 2.0 dynamically creates the timeline according to the amount of event content there is. Making it even simpler to setup! All you need to do is create the event content…

					<div class="horizontal-timeline" id="example">
						<div class="events-content">
							<ol>
								<li class="selected" data-horizontal-timeline='{"date": "16/01/2014"}'>
									// Event description here
								</li>
								<li data-horizontal-timeline='{"date": "23/05/2015"}'>
									// Event description here
								</li>
								…etc.
							</ol>
						</div>
					</div>   		
                

Dates

The dates are essential for the timeline: it's how it all works!

Using a data attribute on the event content, we can specify the date. However, the dates need to be unique within the timeline instance because they act as ID's for the event content and the event date display acts as anchor links. While dates alone are very unique, you can of course combine them with time, creating very unique and specific events.

Previously, timeline has used the data-date attribute, but along with the data-custom-display attribute, it is deprecated as of v2.0.5-alpha.3, in favour of the new combined singular data attribute: data-horizontal-timeline. However, the old multiple attributes will continue to work alongside the singular attribute, until they are removed in a later release.

The new attribute is used as a JSON object with comma separated key:value pairs. This helps to keep the HTML clean and tidy and the timeline options in one place.

The date should be added as the value to the date key in the data object.

Example: data-horizontal-timeline='{"date": "16/01/2014", "customDisplay": "Step 1"}'

As of v2.0.5.4, you can use contentContainerSelector option to specify a container element externally, and separate from the plugin to display the events-content HTML and hide the plugin's default events-content.

It accepts any kind of selector string like ".container" otherwise false is the default.

Note: The plugin's default events-content is not removed, it is only hidden by CSS, as it is still needed by the plugin to make the timeline work correctly.

                    $('#example').horizontalTimeline({
						contentContainerSelector: ".section .external-content"});
                

As previously stated, the event dates are created dynamically along the timeline, but there are a few ways that we can customise the way they are displayed!

The uniform event dates replaced the scattered, distanced style in the original version, meaning they are now positioned at regular intervals.

To keep things from colliding, the intervals have a minimum of 120 px. If the intervals fall below this value, then it will be automatically reset to this.

The intervals are split into 4 options, either as the all new combined object option dateIntervals with key:value pairs, or the deprecated individual options.

• desktop object key or desktopDateIntervals individual option, describes the intervals on desktops. The default is 200
• tablet object key or tabletDateIntervals individual option, describes the intervals on tablets. The default is 150
• mobile object key or mobileDateIntervals individual option, describes the intervals on mobiles. The default is 120
• minimal object key or minimalFirstDateInterval individual option, sets the first date to the start of the timeline, with effectively no interval, at 0px, while the desktop, tablet and mobile date intervals will be set from the second date onwards. The default is true

There may be times when a different type of date display will be useful, version 2.0 adds that functionality, allowing up to 6 types! You can specify the type of date display using the dateDisplay option. The display types are as follows:

• dateTime defines the full date and/or time as set in the date portion of the data object.
• date defines the date only, displays in the format DD/MM/YYYY
• time defines the time only, displays in the format HH:MM
• dayMonth defines the day and month only, displays in the format DD/monthName
• monthYear defines the month and year only, displays in the format monthName/YYYY
• year defines the year only, displays in the format YYYY

The default is dateTime

As requested via email, there is also an option to customise the date display text. So in case the project doesn't require dates, but another form of text, you can specify that custom text for the date display with this option.

There is no plugin options for this one though! Just add the customDisplay to the data-horizontal-timeline object or add the deprecated data-custom-display attribute along with your custom text to the appropriate event content, and it'll work immediately.

Note: This overrides the dateDisplay plugin option whereever the customDisplay or data-custom-display is used.

You can also mix the use of custom text with the date formats, so that only one (or more) events can be custom, while the rest will be left untouched as one of the 6 date formats.

					<div class="horizontal-timeline" id="example">
						<div class="events-content">
							<ol>
								<li class="selected" data-horizontal-timeline='{"date": "16/01/2014", "customDisplay": "Custom Text"}'>
									// Event description here
								</li>
								<li data-horizontal-timeline='{"date": "23/05/2015"}'>
								// Event description here
							</li>
								…etc.
							</ol>
						</div>
					</div>   		
            	

The previously mentioned natural support for ordering is great, but what if you want to reverse the events and start selecting them from the right instead of the left? Well, that's where the dateOrder option comes in handy.

Setting it to reverse will reverse the order in which the event dates are displayed and selected on the timeline. The default is normal .

Note:

• When set to normal , the order of the date display is the same as their corresponding event content and the selection process starts on the left.
• When set to reverse , the order of the date display is reversed and the selection process starts on the right; - i.e., the first event is now the last event on the farthest right along the timeline, but it is still technically the first event being selected. However, the timeline filling line direction remains unchanged and will always fill from the left.
• Autoplay will be affected and works in the direction set by this option. But the progress bar direction remains unchanged and will always fill from the left.
• If any of the event content has the optional selected class then the selection process is skipped naturally.

					$('#example').horizontalTimeline({
						dateOrder: "reverse"
					});
				

By popular demand, an autoplay feature has been added! Plus pause/play buttons, pause on hover and adjustable speed, with a progress bar to visualise the length of time autoplay stays on each event.

There are 3 options:

• autoplay This enables the autoplay feature. The default is false
• autoplaySpeed This specifies the speed of the autoplay cycle in seconds. The default is 8
• autoplayPause_onHover When set to true, this allows the autoplay cycle to pause on mouse hover of the event content. It will play again when the mouse hover ends. The default is false

As of v2.0.5.3, you can specify a different speed for every event. This option utilises the data-horizontal-timeline. Simply add the "speed" key and an arbitrary number value (in seconds) to the data object of the specific event you want to change the speed of and it will override the plugin setting autoplaySpeed

Example: data-horizontal-timeline='{"date": "16/01/2014", "speed": 15}'

Because this is an event-specific option, you can pick and choose the events to override and where there isn't a speed option inside the data attribute, autoplay will default to the plugin setting. See the live example below.

					$('#example').horizontalTimeline({
						autoplay: true,
						autoplaySpeed: 8,
						autoplayPause_onHover: true
					});
				

					// Data attribute speed option

					<li data-horizontal-timeline='{"date": "16/01/2014", "speed": 10}'></li>
					<li data-horizontal-timeline='{"date": "16/01/2015", "speed": 4}'></li>
					<li data-horizontal-timeline='{"date": "23/10/2015", "speed": 20}'></li>
					<li data-horizontal-timeline='{"date": "23/10/2017"}'></li>
					<li data-horizontal-timeline='{"date": "23/10/2018"}'></li>
				

Want to link to a specific date of a timeline? No problem, just add a simple go-to anchor link anywhere on the page.

					<a href="#example" class="goto-horizontal-timeline" data-gototimeline='{"date": "23/10/2015", "scrollspeed": 500, "scrolloffset": 0, "scrolleasing": "linear"}'>Link description</a>
				

The go-to timeline link works just like any other link, so you can use it:

• Outside of the timeline, like this:
  Go to Year timeline at 25/11/2017
• Inside the timeline and target itself, like in the timeline below.
• Inside the timeline and link to another timeline! See the last event of the example below.

Scrolling the event content couldn't be easier using the jQuery Mousewheel plugin!

useScrollWheel enables the mousewheel functionality. Scrolling works when the mouse is over the event content and then using the mousewheel, scroll down to show the next content and scroll up to show the previous content. The default is false

Note: the required plugin file will be loaded dynamically, so there's no need to add it to the document. But if it's already apart of your project, don't worry; the timeline will know that and won't load the plugin again, it'll just call the functions. If addRequiredFile option is set to false the required file won't be loaded at all, the timeline will just call the functions.

					$('#example').horizontalTimeline({
						useScrollWheel: true
						
					});
				

Touch events for mobile and touch screen devices are provided by the jQuery TouchSwipe plugin.

useTouchSwipe enables the TouchSwipe functionality. The default is true

Usage

There's 2 ways TouchSwipe is implemented:

• Scrolling the timeline

  Scrolling the timeline is made easier with TouchSwipe... just swipe(drag) the timeline in the direction, and it will scroll the amount of distance swiped. A small distance swiped means a small distance scrolled and likewise for large distances.

• Changing the event content

  Changing the event content couldn't be easier... just swipe(drag) the event content in the direction and it will change accordingly.

While it is useful for mobiles and other touch screen devices, timeline won't force the TouchSwipe functionality if it's set as false

Note: the required plugin file will be loaded dynamically, so there's no need to add it to the document. But if it's already apart of your project, don't worry; the timeline will know that and won't load the plugin again, it'll just call the functions. If addRequiredFile option is set to false the required file won't be loaded at all, the timeline will just call the functions.

All of the timelines on this website are examples of TouchSwipe, just load it up in a mobile or touch screen device for real touch or on a desktop computer using the mouse.

					$('#example').horizontalTimeline({
						useTouchSwipe: true
						
					});
				

You can use the keyboard arrow keys (left and right) to scroll the event content.

useKeyboardKeys enables the keyboard arrow keys. The default is false

					$('#example').horizontalTimeline({
						useKeyboardKeys: true
						
					});