The Worlds Most Powerful
WordPress Builder

If you Purchased & Registered a Slider Revolution License you can comfortably upgrade version 5.x to 6.0 from your WordPress Dashboard.

Why Activate Slider Revolution?

Activating Slider Revolution with your Personal Purchas Code will unlock all available Features.

Easy Live Updates
Personal License Key
200+ Template Library
1000+ Object Library
25+ Amazing Add-Ons
1on1 Ticket Support

*Regular License from $26. One License Key required per Domain.

Slider Revolution 6.0 NOW available!

QUICK TIP:

Review the Basic Template Setup for information about how to setup a custom production environment.

To get started with the Countdown Add-On, first add the “revolutions-addons” folder into your production site:

Next, add the Countdown script. The script should placed below all other scripts on the page.


<!– COUNTDOWN SCRIPT –>
<script type=”text/javascript” src=”revolution-addons/countdown/js/revolution.addon.countdown.min.js”></script>

Next, assign a variable to your slider’s main settings script as shown in the following example.


var slider = jQuery(‘#rev_slider_1’).show().revolution({

/* ******************** */
/* SLIDER SETTINGS HERE */
/* ******************** */

});

Then set a date to countdown to and initialize the Countdown AddOn:

Review the code comments for adjusting the “targetdate” and “slidechanges” variables to complete the countdown setup.


var slider = jQuery(‘#rev_slider_1’).show().revolution({

/* ******************** */
/* SLIDER SETTINGS HERE */
/* ******************** */

});

// the number 864000000 below represents a future date
// the following online tool can be used to convert your desired date into a number (the epoch timestamp)
// http://www.freeformatter.com/epoch-timestamp-to-date-converter.html
var targetdate = new Date().getTime() + 864000000

// choose which slide to show at any given point in time
var slidechanges = [{days: 0, hours: 0, minutes: 0, seconds: 0, slide: 2}];

// example with multiple slide changes:
/*
var slidechanges = [
{days: 0, hours: 0, minutes: 0, seconds: 12, slide: 2},
{days: 0, hours: 0, minutes: 0, seconds: 0, slide: 3}
];
*/

// initalize the countdown
tp_countdown(slider, targetdate, slidechanges);

Finally, set up your CountDown Layers

To get started, add 4 Text Layers to your slide, each representing the “days”, “hours”, “minutes” and “seconds”:

And then apply the following “id” attributes to each of the 4 Layers:

  1. t_days
  2. t_hours
  3. t_minutes
  4. t_seconds

Example with “t_days” applied as the Layer’s id attribute, designating the Layer as the countdown’s “days” widget. Repeat this for each of the 4 Layers using the id attributes above.


<!– “t_days” added as the Layer’s ID attribute –>
<div id=”t_days” class=”tp-caption tp-resizeme largewhitebg”

data-frames='[{“delay”: 500, “speed”: 300, “from”: “opacity: 0”, “to”: “opacity: 1”},
{“delay”: “wait”, “speed”: 300, “to”: “opacity: 0”}]’

data-x=”center”
data-y=”center”
data-hoffset=”0″
data-voffset=”0″
data-width=”[‘auto’]”
data-height=”[‘auto’]”

>00</div>
<!– END TEXT LAYER –>

Popular Solutions