Setting up your Slider Timeline


1. Setup your testing environment
2. Setup your basic slider
3. Add some content Layers

The Slider's Timeline is used for both autoplay functionality and Layer animation timing.

1. Add a "delay" (in milliseconds) to your Slider's JavaScript settings

2. Choose if the Slider should autoplay or not.

Slides will change automatically:

Slides will only change from user-interaction:

3. Override the Slider's default delay for any give Slide by adding an optional "data-delay" attribute to the Slide's list item.

4. Add an optional progress bar if your slides are setup to change automatically.

Add the progress bar div immediately after the closing </ul> tag for the slides list.

Add the "tp-bottom" class shown in the example below to place the progress bar at the bottom of the slider:
<div class="tp-bannertimer tp-bottom" style="height: 5px; background-color: rgba(0, 0, 0, 0.25);"></div>

5. Choose at which point in the Slide's Timeline your content Layer's should animate in/out.

In the following example, the Layer will animate in and out based on the “delay” settings inside the “data-frames” attribute.

The first “delay” in the example below is for the start animation.  And the second “delay” is for the end animation.

An ending delay set to “wait” ensures that the Layer will remain visible until the Slide officially changes.  But you can also enter a number in milliseconds if you’d like the Layer to animate out beforehand.

Layer will remain visible throughout the life-cycle of the current Slide:

Layer will animate out at the 5 second mark, before the current Slide's life-cycle ends.