Slider Revolution 6.3 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