One of the most requested features for Timeline Express since its release has been the ability to generate a horizontal timeline using Timeline Express. We’ve listened to all of the requests and built-in support for horizontal timelines as well as vertical timelines within Timeline Express.

View Horizontal Timeline Example

Converting an existing Timeline to use the horizontal layout is as simple as adding a new parameter to the shortcode. horizontal can be added to any existing [timeline-express] shortcode, or you can generate a new timeline and add the parameter to the shortcode.

By default, setting the timeline to horizontal will generate a horizontal timeline in a slider layout, with arrow controls. The number of visible items will be 2, and each time the user clicks the ‘next’ or ‘previous’ arrow the timeline will slide 1 item in the future or past.

Basic Usage

At its very core the horizontal timeline can be generated by adding the horizontal="1" parameter to any Timeline Express shortcode.

[timeline-express horizontal="1"]

Visible Items

If you want to control the number of visible items on each slide you can add the items parameter to the shortcode and specify a number.

[timeline-express horizontal="1" items="4"]

Slide Distance

Out of the box, the horizontal timeline will scroll 1 item each time the ‘next’ or ‘previous’ arrow is clicked (or the right/left arrow key is pressed on the keyboard).

If you want to make the horizontal timeline slide more than 1 item when it slides, you can add the slide_distance parameter to the shortcode and specify how far you want each click to slide.

[timeline-express horizontal="1" items="4" slide_distance="2"]

The above example will generate a horizontal timeline slider with 4 visible items, and each time an arrow is clicked it would slide 2 events on the timeline.

Manual Horizontal Timeline

Some users may want to allow users to manually slide through the timeline, without all of the javascript overhead of the slider. This can easily be achieved by setting a slider parameter to 0.

[timeline-express horizontal="1" slider="0"]

Horizontal Timelines & Add-Ons

The horizontal timelines are fully compatible with all of our add-ons, just like the vertical timeline. You can enable the add-ons in the same way you do with the vertical timeline, by adding additional parameters onto the shortcode.

For example, if you wanted to set the horizontal timeline to have no icons and you have the Timeline Express – No Icons Add-On installed you could specify the no-icons="1" parameter alongside the horizontal="1" parameter. This also works for all of our other add-ons.