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 Slicey Add-On, first add the "revolutions-addons" folder into your production site:

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


<!-- SLICEY SCRIPT -->
<script type="text/javascript" src="revolution-addons/slicey/js/revolution.addon.slicey.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 initialize the Slicey Addon:


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

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

});

// initialize the Slicey Add-On
slider.revSliderSlicey();

Next, setup your Slider with a Ken Burns effect:

https://www.themepunch.com/revsliderjquery-doc/ken-burns-effect/

And then add a basic Shape Layer to one of your slides:

https://www.themepunch.com/revsliderjquery-doc/layer-content/#shape

And then convert the Shape Layer into a Slicey Layer by adding the "tp-slicey" class, and also adding the data-attributes shown in the example below.


<!-- add the "tp-slicey" class to the Layer -->
<div class="tp-caption tp-resizeme tp-slicey" data-type="shape"

<!-- scale/zoom offset giving the Layer a 3D effect -->
data-slicey_offset="20"

<!-- enter custom numbers for the CSS3 Blur Filter, -->
<!-- or leave as "inherit" to use the slide's global blur setting (shown in code example below) -->
data-slicey_blurstart="inherit"
data-slicey_blurend="inherit"

<!-- ******************************* -->
<!-- LAYER DATA ATTRIBUTES CONTINUED -->
<!-- ******************************* -->

<div>
<!-- END SLICEY LAYER -->

And finally, add an optional CSS3 box-shadow and CSS3 Blur filter to the KenBurns effect:


<li data-transition="fade"

<!-- apply an optional CSS3 Box Shadow -->
<!-- http://www.cssmatic.com/box-shadow -->
data-slicey_shadow="0 0 20px rgba(0, 0, 0, 0.5)">

<img src="assets/images/notgeneric_bg5.jpg"
alt="Ocean"
class="rev-slidebg"

data-bgposition="center center"
data-bgfit="cover"
data-bgrepeat="no-repeat"

data-kenburns="on"
data-duration="9000"
data-ease="Linear.easeNone"
data-scalestart="100"
data-scaleend="150"

<!-- new KenBurns/Slicey options introduced in version 5.4 -->
data-blurstart="0"
data-blurend="0">

</li>

Popular Solutions