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 Purchase 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 $29. 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 Polyfold Add-On, first add the "revolutions-addons" folder into your production site:

Next, add the Polyfold stylesheet and script. The script should placed below all other scripts on the page.


<!-- POLYFOLD STYLESHEET -->
<link rel="stylesheet" type="text/css" href="revolution-addons/polyfold/css/revolution.addon.polyfold.css" />


<!-- POLYFOLD SCRIPT -->
<script type="text/javascript" src="revolution-addons/polyfold/js/revolution.addon.polyfold.min.js"></script>

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


var tpj = jQuery;
var slider = jQuery('#rev_slider_1').show().revolution({

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

});

Then initialize the Polyfold Addon:


var tpj = jQuery;
var slider = jQuery('#rev_slider_1').show().revolution({

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

});

/*
Instantiate the Polyfold AddOn for the top, bottom or both
The following is an example of how edges can be applied to both the top and bottom of the slider
*/

/* INCLUDE TO ENABLE TOP EDGE */
RsPolyfoldAddOn(tpj, slider, {
position: "top",
color: "#ffffff",
scroll: true,
height: 100,
range: "slider",
point: "sides",
placement: 1,
responsive: true,
negative: false,
leftWidth: 0.5,
rightWidth: 0.5,
inverted: false,
animated: false,
ease: "ease-out",
time: 0.3
});

/* INCLUDE A SECOND TIME TO ENABLE A BOTTOM EDGE IN ADDITION TO THE TOP */
RsPolyfoldAddOn(tpj, slider, {
position: "bottom",
color: "#ffffff",
scroll: true,
height: 100,
range: "slider",
point: "sides",
placement: 1,
responsive: true,
negative: false,
leftWidth: 0.5,
rightWidth: 0.5,
inverted: false,
animated: false,
ease: "ease-out",
time: 0.3
});

Settings Descriptions:

position
  • "top"
  • "bottom"
Apply an edge to the top or bottom of the slider
color
    Set this to the same color as your web page's main content container's background color
    scroll
    • true
    • false
    Apply the edges when the slider scrolls into and out of view, or apply the edges by default
    height
    • Number
    The default height for the edges
    range
    • "slider"
    • "window"
    Calculate angles based on the Slider's position within the window compared to the overall Slider height or the overall Window height
    point
    • "sides"
    • "center"
    The starting point from where the drawing begins
    placement
    • 1
    • 2
    • 3
    z-index positioning for where the edges should be drawn. Enter the number 1 for "Above Entire Slider", 2 for "Behind Navigation", and 3 for "Behind Static Layers"
    responsive
    • true
    • false
    Dynamically adjust the Polyfold Height as the slider is resized.
    negative
    • true
    • false
    Draw the edges in the opposite direction
    leftWidth
    • Number (0-1)
    How long the left edge should span across the slider (0-100%)
    rightWidth
    • Number (0-1)
    How long the right edge should span across the slider (0-100%)
    inverted
    • true
    • false
    Reverse the drawing as the page is scrolled
    animated
    • true
    • false
    Animate the edges as the page is scrolled
    ease
    • "ease-out"
    • "ease-in"
    • "ease-in-out"
    • "ease"
    • "linear"
    The transition timing equation
    time
    • Number
    The animation time in seconds (a number between 0.3-1.0 is recommended)


    RsPolyfoldAddOn(tpj, slider, {

    position: "top",
    color: "#ffffff",
    scroll: true,
    height: 100,
    range: "slider",
    point: "sides",
    placement: 1,
    responsive: true,
    negative: false,
    leftWidth: 0.5,
    rightWidth: 0.5,
    inverted: false,
    animated: false,
    ease: "ease-out",
    time: 0.3

    });

    Popular Solutions