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.
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.
At its very core the horizontal timeline can be generated by adding the
horizontal="1" parameter to any Timeline Express shortcode.
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"]
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
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.