Slider Revolution Responsive jQuery Slider

For support please checkout http://themepunch.com !

This chapter will gives you general instructions on how to install the slider and setup the options. Later chapters will be more detailed if needed.

What files do I need to upload to my server?

Please upload the rs-plugin folder to your server. In this folder you will find the following subfolders containing all of the items content:

js
css
assets

You could use your own jQuery but we recommend loading it directly from the Google ressources (see later in this documentation).

You will find many examples in your downloaded zip under the examples&sources folder..

Implement the jQuery

Add the following lines to your HTML Head:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js></script>

Add Revolution js and css files to your HTML page

Also in the <HEAD> section:

<!-- jQuery REVOLUTION Slider  -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.tools.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<!-- REVOLUTION BANNER CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />

This contains the JS and CSS for the Slider itself and some helping modules .

Create a Container for the Banner

Put it in the HTML: (the class names used here are only examples. In our Example files we called them banner-container, fullwidthbanner-container and fullscreenbanner-container, different then here below ! )

<div class="bannercontainer">
<div class="banner">...</div>
</div>

The Banner-container can have different Styling depending on that, which layout you wish to use.

Auto-Responsive Style

This style allows you to let the wrapping Container decide how big (in width) your Slider will be. The Height will be auto calculated based on the Slider Width

Put this in your CSS File (i.e) :

.bannercontainer {
	width:100%;
	position:relative;
	padding:0;
}
.banner{
	width:100%;
	position:relative;
}

FullScreen Style

This Style allows you to have a banner always fit in the maxium screensize. In Some option you can select containers which will reduce the height of the banner with the height of the container. See examples.

It requests:

a fullwidth and fullheight wrapping container

Put this in your CSS File

.bannercontainer {
		width:100%;
		position:relative;
		padding:0;
}

Create Your First Slides

Create an Unordered list inside the banner container where each <li> element will correspond to one slide.

<ul>
<!-- THE BOXSLIDE EFFECT EXAMPLES  WITH LINK ON THE MAIN SLIDE EXAMPLE -->
 <li data-transition="boxslide" data-slotamount="7" data-link="http://www.google.de">
   <img src="images/slides/image1.jpg">
   <div class="caption sft big_white"  data-x="400" data-y="100" data-speed="700" data-start="1700" data-easing="easeOutBack">KICKSTART YOUR WEBSITE</div>
   <div class="caption sfb big_orange"  data-x="400" data-y="142" data-speed="500" data-start="1900" data-easing="easeOutBack">WITH SLIDER REVOLUTION!</div>
   <div class="caption lfr medium_grey"  data-x="510" data-y="210" data-speed="300" data-start="2000">UNLIMITED TRANSITIONS</div>
 </li>
...
</ul>

Call the jQuery Plugin to build the Slider

(Dont need to set all Options. These are only for Demonstrating all settings)

<script type="text/javascript">
   jQuery(document).ready(function() {
      jQuery('.banner').revolution({
         delay:9000,
         startwidth:960,
         startheight:500,
         startWithSlide:0,
         fullScreenAlignForce:"off",
         autoHeight:"off",
         minHeight:"off",
         shuffle:"off",
         onHoverStop:"on",
         thumbWidth:100,
         thumbHeight:50,
         thumbAmount:3,
         hideThumbsOnMobile:"off",
         hideNavDelayOnMobile:1500,
         hideBulletsOnMobile:"off",
         hideArrowsOnMobile:"off",
         hideThumbsUnderResoluition:0,
         hideThumbs:0,
         hideTimerBar:"off",
         keyboardNavigation:"on",
         navigationType:"bullet",
         navigationArrows:"solo",
         navigationStyle:"round",
         navigationHAlign:"center",
         navigationVAlign:"bottom",
         navigationHOffset:30,
         navigationVOffset:30,
         soloArrowLeftHalign:"left",
         soloArrowLeftValign:"center",
         soloArrowLeftHOffset:20,
         soloArrowLeftVOffset:0,
         soloArrowRightHalign:"right",
         soloArrowRightValign:"center",
         soloArrowRightHOffset:20,
         soloArrowRightVOffset:0,
         touchenabled:"on",
         swipe_velocity:"0.7",
         swipe_max_touches:"1",
         swipe_min_touches:"1",
         drag_block_vertical:"false",
         parallax:"mouse",
         parallaxBgFreeze:"on",
         parallaxLevels:[10,7,4,3,2,5,4,3,2,1],
         parallaxDisableOnMobile:"off",
         stopAtSlide:-1,
         stopAfterLoops:-1,
         hideCaptionAtLimit:0,
         hideAllCaptionAtLilmit:0,
         hideSliderAtLimit:0,
         dottedOverlay:"none",
         spinned:"spinner4",
         fullWidth:"off",
         forceFullWidth:"off"
         fullScreen:"off",
         fullScreenOffsetContainer:"#topheader-to-offset",
         fullScreenOffset:"0px",
         panZoomDisableOnMobile:"off",
         simplifyAll:"off",
         shadow:0
      });
   });
</script>

The Options to Initialise the Plugin (Theme Sorted):

Global Settings:

delay

The time one slide stays on the screen in Milliseconds. Global Setting. You can set per Slide extra local delay time via the data-delay in the <li> element (Default: 9000)
startheight

This Height of the Grid where the Captions are displayed in Pixel. This Height is the Max height of Slider in Fullwidth Layout and in Responsive Layout. In Fullscreen Layout the Gird will be centered Vertically in case the Slider is higher then this value.
startwidth

This Height of the Grid where the Captions are displayed in Pixel. This Width is the Max Width of Slider in Responsive Layout. In Fullscreen and in FullWidth Layout the Gird will be centered Horizontally in case the Slider is wider then this value.

Navigation Settings:

keyboardNavigation

Possible Values: "on", "off" - Allows to use the Left/Right Arrow for Keyboard navigation when Slider is in Focus.
onHoverStop

Possible Values: "on", "off" - Stop the Timer if mouse is hovering the Slider. Caption animations are not stopped !! They will just play to the end.
thumbWidth / thumbHeight

The width and height of the thumbs in pixel. Thumbs are not responsive from basic. For Responsive Thumbs you will need to create media qury based thumb sizes.
thumbAmount

The Amount of visible Thumbs in the same time. The rest of the thumbs are only visible on hover, or at slide change.
hideThumbs

0 - Never hide Thumbs. 1000- 100000 (ms) hide thumbs and navigation arrows, bullets after the predefined ms (1000ms == 1 sec, 1500 == 1,5 sec etc..)

navigationType Display type of the "bullet/thumbnail" bar (Default:"none")

Possible values are: "bullet", "thumb", "none"
navigationArrows Display position of the Navigation Arrows (Default: "nexttobullets")

Possible values are "nexttobullets", "solo"
nexttobullets - arrows added next to the bullets left and right
solo - arrows can be independent positioned, see further options
navigationStyle Look of the navigation bullets if navigationType "bullet" selected.

Possible values: "preview1", "preview2","preview3","preview4","round", "square", "round-old", "square-old", "navbar-old"
navigationHAlign, navigationVAlign

Vertical and Horizontal Align of the Navigation bullets / thumbs (depending on which Style has been selected). Possible values navigationHAlign: "left","center","right" and naigationVAlign: "top","center","bottom"
navigationHOffset navigationVOffset

The Offset position of the navigation depending on the aligned position. from -1000 to +1000 any value in px. i.e. -30
soloArrowLeftHaling, soloArrowRightHalign, solorArrowLeftHalign, soloArrowRightHalign

Vertical and Horizontal Align of the Navigation Arrows (left and right independent!) Possible values navigationHAlign: "left","center","right" and naigationVAlign: "top","center","bottom"
soloArrowLeftHOffset, soloArrowLeftVOffset, soloArrowRightHVOffset, soloArrowRightVOffset

The Offset position of the navigation depending on the aligned position. from -1000 to +1000 any value in px. i.e. -30 Each Arrow independent
touchenabled Enable Swipe Function on touch devices (Default: "on")

Possible values: "on", "off"
swipe_velocity The Sensibility of Swipe Gesture (lower is more sensible) (Default: 0.7)

Possible values: 0 - 1
swipe_max_touches Max Amount of Fingers to touch (Default: 1)

Possible values: 1 - 5
swipe_min_touches Min Amount of Fingers to touch (Default: 1)

Possible values: 1 - 5
drag_block_vertical Prevent Vertical Scroll on Drag (Default: false)

Possible values: true, false

Loops

startWithSlide

Start with a Predefined Slide (index of the slide)
stopAtSlide

Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
stopAfterLoops

Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic

Mobile Visibility

hideCaptionAtLimit

It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)
hideAllCaptionAtLimit

Hide all The Captions if Width of Browser is less then this value
hideSliderAtLimit

Hide the whole slider, and stop also functions if Width of Browser is less than this value

hideNavDelayOnMobile
Hide all navigation after a while on Mobile (touch and release events based)

hideThumbsOnMobile

Possible Values: "on", "off" - if set to "on", Thumbs are not shown on Mobile Devices
hideBulletsOnMobile

Possible Values: "on", "off" - if set to "on", Bullets are not shown on Mobile Devices
hideArrowsOnMobile

Possible Values: "on", "off" - if set to "on", Arrows are not shown on Mobile Devices
hideThumbsUnderResoluition

Possible Values: 0 - 1900 - defines under which resolution the Thumbs should be hidden. (only if hideThumbonMobile set to off

Layout Styles

spinner

Possible Values: "spinner1" , "spinner2", "spinner3" , "spinner4", "spinner5" - The Layout of Loader. If not defined, it will use the basic spinner.
hideTimerBar

Possible Values: "on" , "off" - it will hide or show the banner timer
fullWidth

Possible Values: "on", "off" - defines if the fullwidth/autoresponsive mode is activated
autoHeight

Possible Values: "on", "off" - defines if in fullwidth mode the height of the Slider proportional always can grow. If it is set to "off" the max height is == startheight
minHeight

Possible Values: 0 - 9999 - defines the min height of the Slider. The Slider container height will never be smaller than this value. The Content container is still shrinks linear to the browser width and original width of COntainer, and will be centered vertically in the Slider
fullScreenAlignForce

Possible Values: "on", "off" - Allowed only in FullScreen Mode. It lets the Caption Grid to be the full screen, means all position should happen with aligns and offsets. This allow you to use the faresst corner of the slider to present any caption there.
forceFullWidth

Possible Values: "on", "off" - Force the FullWidth Size even if the slider embeded in a boxed container. It can provide higher Performance usage on CPU. Try first set it to "off" and use fullwidth container instead of using this option.
fullScreen

Possible Values: "on", "off" - defines if the fullscreen mode is activated
fullScreenOffsetContainer

The value is a Container ID or Class i.e. "#topheader" - The Height of Fullheight will be increased with this Container height !
fullScreenOffset

A px or % value which will be added/reduced of the Full Height Container calculation.
shadow

Possible values: 0,1,2,3 (0 == no Shadow, 1,2,3 - Different Shadow Types)
dottedOverlay

Possible Values: "none", "twoxtwo", "threexthree", "twoxtwowhite", "threexthreewhite" - Creates a Dotted Overlay for the Background images extra. Best use for FullScreen / fullwidth sliders, where images are too pixaleted.

Parallax Settings

parallax

Possible Values: "mouse" , "scroll" - How the Parallax should act. On Mouse Hover movements and Tilts on Mobile Devices, or on Scroll (scroll is disabled on Mobiles !)
parallaxBgFreeze

Possible Values: "on", "off" - if it is off, the Main slide images will also move with Parallax Level 1 on Scroll.
parallaxLevels

An array which defines the Parallax depths (0 - 10). Depending on the value it will define the Strength of the Parallax offsets on mousemove or scroll. In Layers you can use the class like rs-parallaxlevel-1 for the different levels. If one tp-caption layer has rs-parallaxlevel-X (x 1-10) then it activates the Parallax movements on that layer.

parallaxDisableOnMobile

Possible Values: "on", "off" - Turn on/ off Parallax Effect on Mobile Devices

Pan Zoom Settings

panZoomDisableOnMobile

Possible Values: "on", "off" - Turn on/ off Pan Zoom Effects on Mobile Devices

Further Options

simplifyAll

Possible Values: "on", "off" - Set all Animation on older Browsers like IE8 and iOS4 Safari to Fade, without splitting letters to save performance

Slide Options

<li> - Every list item represents a new Slide. To Define Transitions, main links, etc. use the following data- values per list item.

Transition Effects

data-transition

The appearance transition of this slide. You can define more than one, so in each loop the next slide transition type will be shown.

Flat Transitions:

Slide To Top - slideup
Slide To Bottom - slidedown
Slide To Right - slideright
Slide To Left - slideleft
Slide Horizontal (depending on Next/Previous) - slidehorizontal
Slide Vertical (depending on Next/Previous) - slidevertical
Slide Boxes - boxslide
Slide Slots Horizontal - slotslide-horizontal
Slide Slots Vertical - slotslide-vertical
Fade Boxes - boxfade
Fade Slots Horizontal - slotfade-horizontal
Fade Slots Vertical - slotfade-vertical
Fade and Slide from Right - fadefromright
Fade and Slide from Left - fadefromleft
Fade and Slide from Top - fadefromtop
Fade and Slide from Bottom - fadefrombottom
Fade To Left and Fade From Right - fadetoleftfadefromright
Fade To Right and Fade From Left - fadetorightfadefromleft
Fade To Top and Fade From Bottom - fadetotopfadefrombottom
Fade To Bottom and Fade From Top - fadetobottomfadefromtop
Parallax to Right - parallaxtoright
Parallax to Left - parallaxtoleft
Parallax to Top - parallaxtotop
Parallax to Bottom - parallaxtobottom
Zoom Out and Fade From Right - scaledownfromright
Zoom Out and Fade From Left - scaledownfromleft
Zoom Out and Fade From Top - scaledownfromtop
Zoom Out and Fade From Bottom - scaledownfrombottom
ZoomOut - zoomout
ZoomIn - zoomin
Zoom Slots Horizontal - slotzoom-horizontal
Zoom Slots Vertical - slotzoom-vertical
Fade - fade
Random Flat - random-static
Random Flat and Premium - random

Premium Transitions:

Curtain from Left - curtain-1
Curtain from Right - curtain-2
Curtain from Middle - curtain-3
3D Curtain Horizontal - 3dcurtain-horizontal
3D Curtain Vertical - 3dcurtain-vertical
Cube Vertical - cube
Cube Horizontal - cube-horizontal
In Cube Vertical - incube
In Cube Horizontal - incube-horizontal
TurnOff Horizontal - turnoff
TurnOff Vertical - turnoff-vertical
Paper Cut - papercut
Fly In - flyin
Random Premium - random-premium
Random Flat and Premium - random
data-randomtransition

"on" / "off" - This will allow a Random transitions of the Selected Transitions you choosed in the data-transitions. Dont use together with random premium and random flat transitions !
data-slotamount

The number of slots or boxes the slide is divided into. If you use boxfade, over 7 slots can be juggy.
data-masterspeed

The speed of the transition in "ms". default value is 300 (0.3 sec)
data-delay

A new Dealy value for the Slide. If no delay defined per slide, the dealy defined via Options will be used

Links (Full Slide Links)

data-link

A link on the whole slide pic
data-target

The target of the Link for the whole slide pic. (i.e. "_blank", "_self")
data-slideindex

Possible values: next,back, 1-x (where x is the max. Amount of slide) If this value is set, click on slide will call the next / previous, or n th Slide.

Thumbnail

data-thumb

An Alternative Source for thumbs. If not defined a copy of the background image will be used in resized form

Title

data-title

In Navigation Style Preview1- preview4 mode you can show the Title of the Slides also. Due this option you can define for each slide its own Title

The Main Image

Each Slide (<li> </li>) MUST include a main image which is added as a simple <img> tag at the first level. It can be a Simpe image, a colored or transparent image, or dummy image as lazy load version.

Simple Image

<img src="images/slides/slide13.jpg" >

Colored Background Instead of Image

<img src="images/slides/transparent.png" style="background-color:#56e34a" >

Lazy Loaded Image

<img src="images/slides/dummy.jpg" data-lazyload="images/slides/slide13.jpg">

Tiled Image

<img src="images/slides/slide13.jpg" data-bgrepeat="repeat" data-bgfit="normal" data-bgposition="center center">

Fitting Image

<img src="images/slides/slide13.jpg" data-bgrepeat="no-repeat" data-bgfit="contain" data-bgposition="center center">

Covering Image

<img src="images/slides/slide13.jpg" data-bgrepeat="no-repeat" data-bgfit="cover" data-bgposition="center center">

Bottom Right Aligned Covering Image

<img src="images/slides/slide13.jpg" data-bgrepeat="no-repeat" data-bgfit="cover" data-bgposition="right bottom">

Ken Burns Animation on Image

<img src="images/kenburns1.jpg"  alt="kenburns1"  data-bgposition="left bottom" data-kenburns="on" data-duration="2000" data-ease="Power4.easeInOut" data-bgfit="200" data-bgfitend="100" data-bgpositionend="center top">

Image Attributes

Lazy Loading
src="images/slides/dummy.jpg" (or any other dummy small image to decrease the loading time of Document) data-lazyload="path/filename" Here you need to declare the Path and File name of the image you wish to laod as Main Image in Slide
Background Repeat
data-bgrepeat:no-repeat / repeat / repeat-x / repeat-y (the way the image is shown in the slide main container)
Background Fit
data-bgfit:cover / contain / normal / width(%) height(%) (select one to decide how the image should fit in the Slide Main Container).
For Ken Burn use only a Number, which is the % Zoom at start. 100 will fit with Width or height automatically, 200 will be double sized etc..
Background Fit End
data-bgfitend: Use only a Number . i.e. 300 will be a 300% Zoomed image where the basic 100% is fitting with width or height.
Background Position
data-bgposition:left top / left center / left bottom / center top / center center / center bottom / right top / right center / right bottom
Background Position End
data-bgpositionend:left top / left center / left bottom / center top / center center / center bottom / right top / right center / right bottom For Ken Burns Animation. This is where the IMG will be animatied
Ken Burns Effect
data-kenburns:on/off to turn on Ken Burns Effect or keep it disabled.
Duration for Ken Burns
data-duration:the value in ms how long the animation of ken burns effect should go. i.e. 3000 will make a 3s zoom and movement.
Easing of Ken Burns Effect
data-ease:Same values as by Caption Easings available. The Movement Easing.

The Captions / Layers

Each <li> (slide) can include unlimited amount of Captions. Caption are simple html markups with iframe, image, heading , paragraph and any other tags. Each Caption must be wrapped via a <div class="caption"></div>.

Each Caption has some special classes and some data- attributes, to set animation type, position, speed, easings etc.

Caption Classes

the "caption" class

It is the Wrapping main Class which is a MUST. Each Caption need to be defined like this, other way the Slider Plugin can not identifikate the Caption container
Styling Captions (like "big_white", "big_orange", "medium_grey" etc...)

These are Styling classes created in the settings.css You can add unlimited amount of Styles in your own css file, to style your captions at the top level already
Parallax Settings (like "rs-parallaxlevel-1", "rs-parallaxlevel-2", "rs-parallaxlevel-3" etc...)

You can define a Parallax Level for each Layer, which will allow the Layer to move based on scroll or mouse movements (if option activated). Based on the Class the Strength of the offset can be defined.
Animation Classes

Animation Classes defined the start / end animations on Captions.

Incoming animation Classes:

sft - Short from Top

sfb - Short from Bottom

sfr - Short from Right

sfl - Short from Left

lft - Long from Top

lfb - Long from Bottom

lfr - Long from Right

lfl - Long from Left

skewfromleft - Skew from Left

skewfromright - Skew from Right

skewfromleftshort - Skew Short from Left

skewfromrightshort - Skew Short from Right

fade - fading

randomrotate- Fade in, Rotate from a Random position and Degree

customin - Custom Incoming Animation - see below all data settings

Outgoing animation Classes:

stt - Short to Top

stb - Short to Bottom

str - Short to Right

stl - Short to Left

ltt - Long to Top

ltb - Long to Bottom

ltr - Long to Right

ltl - Long to Left

skewtoleft - Skew to Left

skewtoright - Skew to Right

skewtoleftshort - Skew Short to Left

skewtorightshort - Skew Short to Right

fadeout - fading

randomrotateout- Fade in, Rotate from a Random position and Degree

customout - Custom Outgoing Animation - see below all data settings

Custom Incoming / OutGoing settings:

data-customin="rotationX:0;rotationY:0;rotationZ:0...." - How the Caption is Transformed before animation starts. All value will be animated to 0 or 1 to remove all transoformation of the Caption.

data-customout="rotationX:0;rotationY:0;rotationZ:0...."- The End Transformed Style after the animation finnished. All value will be animated from 0 or 1 to the selected transformation.

Custom Animation (in and out) Parameters set via data-customin and data-customout within the caption div. Parameter should be closed with ";"

rotationX:0;rotationY:0;rotationZ:0 - value between -920 and +920. Rotation Direction set via X,Y,Z, Can be mixed
scaleX:1;scaleY:1 - value between 0.00 - 10.00 Scale width and height. 1 == 100%
skewX:1;skewY:1 - value between 0.00 - 10.00 Skew inVertical and/or horizontal direction 0 = no skew
opacity:1 - value between 0.00 - 1.00 Transparencity
transformOrigin:center center - Sets the origin around which all transforms occur. By default, it is in the center of the element ("50% 50%"). You can define the values using the keywords "top", "left", "right", or "bottom" or you can use percentages (bottom right corner would be "100% 100%") or pixels.
Values:left top / left center / left bottom / center top / center center / center bottom / right top / right center / right bottom or x% y%
transformPerspective:300 - To get your elements to have a true 3D visual perspective applied, you must either set the “perspective” property of the parent element or set the special “transformPerspective” of the element itself (common values range from around 200 to 1000, the lower the number the stronger the perspective distortion).
x:0;y:0; - the x / y distance of the element in px. i.e. x:-50px means vertical left 50px

Caption data- settings

data-x

Possible Values are "left", "center", "right", or any Value between -2500 and 2500.
If left/center/right is set, the caption will be siple aligned to the position. Any other "number" will simple set the left position in px of tha caption.

At "left" the left side of the caption is aligned to the left side of the slider.
At "center" the center of caption is aligned to the center of slide.
At "right" the caption right side is aligned to the right side of the Slider.
data-y

Possible Values are "top", "center", "bottom", or any Value between -2500 and 2500.
If top/center/bottom is set, the caption will be siple aligned to the position. Any other "number" will simple set the top position in px of tha caption.

At "top" the top side of the caption is aligned to the top side of the slider.
At "center" the center of caption is aligned to the center of slide.
At "bottom" the caption bottom side is aligned to the bottom side of the Slider.

data-hoffset

Only works if data-x set to left/center/right. It will move the Caption with the defined "px" from the aligned position. i.e. data-x="center" data-hoffset="-100" will put the caption 100px left from the slide center horizontaly.
data-voffset

Only works if data-y set to top/center/bottom. It will move the Caption with the defined "px" from the aligned position. i.e. data-x="center" data-hoffset="-100" will put the caption 100px left from the slide center vertically.
data-speed

The speed in milliseconds of the transition to move the Caption in the Slide at the defined timepoint.
data-splitin

Split Text Animation (incoming transition) to "words", "chars" or "lines". This will create amazing Animation Effects on one go, without the needs to create more captions.
data-elementdelay

A Value between 0 and 1 like 0.1 to make delays between the Splitted Text Element (start) Animations. Higher the amount of words or chars, you should decrease that number!
data-splitout

Split Text Animation (outgoing transition) to "words", "chars" or "lines". Only available if data-end is set !
data-endelementdelay

A Value between 0 and 1 like 0.1 to make delays between the Splitted Text Element (end) Animations. Higher the amount of words or chars, you should decrease that number!
data-start

The timepoint in millisecond when/at the Caption should move in to the slide.
data-easing

The Easing Art how the caption is moved in to the slide (note! Animation art set via Classes !).
Possible Values are:

New Easings:Linear.easeNone Power0.easeIn (linear), Power0.easeInOut (linear), Power0.easeOut (linear), Power1.easeIn, Power1.easeInOut, Power1.easeOut, Power2.easeIn, Power2.easeInOut, Power2.easeOut, Power3.easeIn, Power3.easeInOut, Power3.easeOut, Power4.easeIn, Power4.easeInOut, Power4.easeOut, Quad.easeIn (same as Power1.easeIn), Quad.easeInOut (same as Power1.easeInOut), Quad.easeOut (same as Power1.easeOut), Cubic.easeIn (same as Power2.easeIn), Cubic.easeInOut (same as Power2.easeInOut), Cubic.easeOut (same as Power2.easeOut), Quart.easeIn (same as Power3.easeIn), Quart.easeInOut (same as Power3.easeInOut), Quart.easeOut (same as Power3.easeOut), Quint.easeIn (same as Power4.easeIn), Quint.easeInOut (same as Power4.easeInOut), Quint.easeOut (same as Power4.easeOut), Strong.easeIn (same as Power4.easeIn), Strong.easeInOut (same as Power4.easeInOut), Strong.easeOut (same as Power4.easeOut), Back.easeIn, Back.easeInOut, Back.easeOut, Bounce.easeIn, Bounce.easeInOut, Bounce.easeOut, Circ.easeIn, Circ.easeInOut, Circ.easeOut, Elastic.easeIn, Elastic.easeInOut, Elastic.easeOut, Expo.easeIn, Expo.easeInOut, Expo.easeOut, Sine.easeIn, Sine.easeInOut, Sine.easeOut, SlowMo.ease

Old Easings: easeOutBack, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic

easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint

easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine

easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc

easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack

easeInBounce, easeOutBounce, easeInOutBounce
data-endspeed

The speed in milliseconds of the transition to move the Caption out from the Slide at the defined timepoint.
data-end

The timepoint in millisecond when/at the Caption should move out from the slide.
data-endeasing

The Easing Art how the caption is moved out from the slide (note! Animation art set via Classes !).
Possible Values are:

New Easings:Linear.easeNone Power0.easeIn (linear), Power0.easeInOut (linear), Power0.easeOut (linear), Power1.easeIn, Power1.easeInOut, Power1.easeOut, Power2.easeIn, Power2.easeInOut, Power2.easeOut, Power3.easeIn, Power3.easeInOut, Power3.easeOut, Power4.easeIn, Power4.easeInOut, Power4.easeOut, Quad.easeIn (same as Power1.easeIn), Quad.easeInOut (same as Power1.easeInOut), Quad.easeOut (same as Power1.easeOut), Cubic.easeIn (same as Power2.easeIn), Cubic.easeInOut (same as Power2.easeInOut), Cubic.easeOut (same as Power2.easeOut), Quart.easeIn (same as Power3.easeIn), Quart.easeInOut (same as Power3.easeInOut), Quart.easeOut (same as Power3.easeOut), Quint.easeIn (same as Power4.easeIn), Quint.easeInOut (same as Power4.easeInOut), Quint.easeOut (same as Power4.easeOut), Strong.easeIn (same as Power4.easeIn), Strong.easeInOut (same as Power4.easeInOut), Strong.easeOut (same as Power4.easeOut), Back.easeIn, Back.easeInOut, Back.easeOut, Bounce.easeIn, Bounce.easeInOut, Bounce.easeOut, Circ.easeIn, Circ.easeInOut, Circ.easeOut, Elastic.easeIn, Elastic.easeInOut, Elastic.easeOut, Expo.easeIn, Expo.easeInOut, Expo.easeOut, Sine.easeIn, Sine.easeInOut, Sine.easeOut, SlowMo.ease

Old Easings: easeOutBack, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic

easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint

easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine

easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc

easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack

easeInBounce, easeOutBounce, easeInOutBounce

Special Classes within the Caption container

tp-scrollbelowslider

If this class added to an element within the caption container, it will scroll the Body Position to under the current slider (used in Fullscreen slider only)
scrolloffset

value from -200 till 200. The Offset Value of the Scroll Position
tp-resizeme

Add class tp-resizeme to the container inside the caption and every item within (included the same container) will be responsive resized. Only needed if more than one depth exist in the container !
frontcorner, backcorner, frontcornertop, backcornertop

This classes added without any content in a closed div i.e. <div class="frontcorner"></div> within the container. It will cut the left/right side of the caption background in 45° 1:1

Loop Animations Within the Layers

To Define Loop animations, everything which comes inside the Layer need to be wrapped with a div container where you can set the different Loop Animation Details

rs-wave

<div class="rs-wave"  data-speed="2" data-angle="0" data-radius="20" data-origin="50% 50%">
  <img src="images/dummy.png" alt="" data-lazyload="images/newwave1.png">
</div>

rs-pulse

<div class="rs-pulse"  data-easing="Power4.easeInOut" data-speed="2" data-zoomstart="1" data-zoomend="0.95">
  <img src="images/dummy.png" alt="" data-lazyload="images/cloud1.png">
 </div>

rs-pendulum

<div class=" rs-pendulum"  data-easing="Power1.easeInOut" data-startdeg="-6" data-enddeg="6" data-speed="2" data-origin="50% 75%">
  <img src="images/dummy.png" alt="" data-lazyload="images/cloud1.png">
 </div>

rs-slideloop

<div class=" rs-slideloop" data-easing="Power3.easeInOut" data-speed="0.5" data-xs="-5" data-xe="5" data-ys="0" data-ye="0">
  <img src="images/dummy.png" alt="" data-lazyload="images/cloud1.png">
 </div>

rs-rotate

<div class=" rs-rotate"  data-easing="Power1.easeInOut" data-startdeg="-6" data-enddeg="6" data-speed="2" data-origin="50% 75%">
  <img src="images/dummy.png" alt="" data-lazyload="images/cloud1.png">
 </div>

You can add now Static Layers to your Slider. Static Layers are defiend outside the Layers (since they are independent of any other elements and slides).

You will need to define the Start and End Slide and as always the start and end time where the Layer becomes visible, or hides again.

Add your Static Layers into the static layer wrapper under the <ul> tag within the Slider !

<ul>
...your slides and layers...
</ul>
<div class="tp-static-layers">
	<!-- LAYER NR. 1 -->
	<div class="tp-caption customin customout tp-static-layer"
		data-x="center" data-hoffset="100"
		data-y="bottom" data-voffset="0"
		data-customin="x:50;y:150;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.5;scaleY:0.5;skewX:0;skewY:0;opacity:0;transformPerspective:0;transformOrigin:50% 50%;"
		data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
		data-speed="800"
		data-start="700"
		data-startslide="1"
		data-endslide="4"
		data-end="1800"
		data-easing="Power4.easeOut"
		data-endspeed="500"
		data-endeasing="Power4.easeIn"
		style="z-index: 3"><div class="rs-wave" data-angle="90" data-distance="40" data-radius="40" data-speed="2"><img src="images/woman.png" alt=""></div>
	</div>
</div>

The slider can play Vimeo, YouTube and HTML5 (videoJs) Videos, in boxed and "FullSlide" size. Via the Embeded API's the Slider will be paused, and restarted from the VideoPlayers. To use the Video Files in Slider see the following instructions.

Each Video file has the same data- options like:

autoplay

Possible Values: "true" / "false" - will play the Video Directly when slider has been loaded
autoplayonlyfirsttime

Possible Values: "true" / "false" after first Autplay the video will not be played automatically
nextslideatend

Possible Values: "true" / "false" after video come to the end position, it swaps to the next slide automatically.
videoposter

the full path to an image which will be shown as Thumbnail for the Video. (only if autoplay set to false, or autoplayonlyfirsttime set to true)
forcecover

used only at HTML5 Videos. In case it is selected, the Videos will be resized to cover the full Slider size.
forcerewind

Every time the Slide is shown, the Video will rewind to the start.
volume

If value set to "mute", video will be played muted.
videowidth

Width of Video (i.e. 500 for 500px, or 100% for 100%
videoheight

Width of Video (i.e. 500 for 500px, or 100% for 100%
aspectratio

"16:9" or "4:3"
videopreload

Which content of Video should be preloaded. "none", "meta", "auto"
videomp4

The MP4 Source for the HTML5 Video
videowebm

The WEBM Source for the HTML5 Video
videoogv

The OGV Source for the HTML5 Video
ytid

The YouTube ID of the Video
vimeoid

The Vimeo ID of the Video
videocontrols

Show/Hide the controls of the Video. "none", "controls"
videoattributes

Further Video Attributes for not listed Options and Settings of Video. Used for YouTube and Vimeo like "enablejsapi=1&html5=1&hd=1&wmode=opaque&showinfo=0&rel=0"
videoloop

Loop HTML5 Videos - "none", "loop", "loopandnoslidestop" loop and no slide stop will loop the video, but as soon the video Timer reached the endpoint, next slide will be started.

YouTube Video via iFrame

Boxed version

YouTube Video will be added within a caption due an iframe. The Following example shows an iFrame embeded YouTube Video in a caption (460px X 259px), i.e.:

<div class="caption fade "
   data-autoplay="true"
   data-autoplayonlyfirsttime="true"
   data-thumbimage="yourpath/yourimage"
   data-nextslideatend="false"
   data-x="130"
   data-y="70"
   data-speed="500"
   data-start="10"
   data-easing="easeOutBack">
<iframe src="http://www.youtube.com/embed/T8--OggjJKQ?enablejsapi=1&html5=1&hd=1&wmode=opaque&controls=1&showinfo=0;rel=0;" width="460" height="259"></iframe>
</div>

You may need to use the origina=http://yourdomain or origin=https://yourdomain for YT Api issues !

FullWidth Version (/i.e.)

 <div class="caption fade fullscreenvideo"
     data-autoplay="true"
     data-autoplayonlyfirsttime="true"
     data-thumbimage="yourpath/yourimage"
     data-nextslideatend="true"
     data-x="0"
     data-y="0"
     data-speed="500"
     data-start="10"
     data-easing="easeOutBack">
<iframe src="http://www.youtube.com/embed/T8--OggjJKQ?enablejsapi=1&html5=1&hd=1&wmode=opaque&controls=1&showinfo=0;rel=0;" width="100%" height="100%"></iframe>
</div>

You may need to use the origin=http://yourdomain or origin=https://yourdomain for YT Api issues !

YouTube Video via Options

Boxed version

YouTube Video will be added via Options. The Following example shows an embeded YouTube Video which is loaded only on Demand. in a caption (460px X 259px), i.e.:

<div class="tp-caption sfl fadeout tp-videolayer"
		data-x="center" data-hoffset="134"
		data-y="center" data-voffset="-6"
		data-speed="600"
		data-start="1000"
		data-easing="Power4.easeOut"
		data-endspeed="500"
		data-endeasing="Power4.easeOut"
		data-autoplay="true"
		data-autoplayonlyfirsttime="true"
		data-nextslideatend="true"
		style="z-index: 8"
		data-ytid="T8--OggjJKQ"
		data-videoattributes="enablejsapi=1&html5=1&hd=1&wmode=opaque&showinfo=0&rel=0"
		data-videocontrols="controls"
		data-videowidth="640"
		data-videoheight="360">
</div>

You may need to use the origina=http://yourdomain or origin=https://yourdomain for YT Api issues !

FullWidth Version (/i.e.)

 <div class="tp-caption sfl fadeout fulllscreenvideo tp-videolayer"
		data-x="0"
		data-y="0"
		data-speed="600"
		data-start="1000"
		data-easing="Power4.easeOut"
		data-endspeed="500"
		data-endeasing="Power4.easeOut"
		data-autoplay="true"
		data-autoplayonlyfirsttime="true"
		data-nextslideatend="true"
		style="z-index: 8"
		data-ytid="T8--OggjJKQ"
		data-videoattributes="enablejsapi=1&html5=1&hd=1&wmode=opaque&showinfo=0&rel=0"
		data-videocontrols="controls"
		data-videowidth="100%"
		data-videoheight="100%">
</div>

You may need to use the origin=http://yourdomain or origin=https://yourdomain for YT Api issues !

Vimeo Video via iFrame

Vimeo Video API works only Online. It will not work well on Localhost due some Sandbox Security reason. Please always test it Online.

Boxed Version

<div class="caption fade "
    data-autoplay="true"
    data-nextslideatend="false"
    data-x="190"
    data-y="110"
    data-speed="500"
    data-start="10"
    data-easing="easeOutBack">
<iframe src="http://player.vimeo.com/video/29298709?title=0&amp;byline=0&amp;portrait=0;api=1" width="460" height="259"></iframe>
</div>

FullWidth Version (i.e.)

 <div class="caption fade fullscreenvideo"
    data-autoplay="true"
    data-nextslideatend="true"
    data-x="0"
    data-y="0"
    data-speed="500"
    data-start="10"
    data-easing="easeOutBack">
<iframe src="http://player.vimeo.com/video/29298709?title=0&amp;byline=0&amp;portrait=0;api=1" width="100%" height="100%"></iframe>
</div>

Vimeo Video via Options

Vimeo Video API works only Online. It will not work well on Localhost due some Sandbox Security reason. Please always test it Online. Vimeo Video will be added via Options. The Following example shows an embeded Vimeo Video which is loaded only on Demand in a Layer (460px X 259px), i.e.:

Boxed version

<div class="tp-caption sfl fadeout tp-videolayer"
		data-x="center" data-hoffset="134"
		data-y="center" data-voffset="-6"
		data-speed="600"
		data-start="1000"
		data-easing="Power4.easeOut"
		data-endspeed="500"
		data-endeasing="Power4.easeOut"
		data-autoplay="true"
		data-autoplayonlyfirsttime="true"
		data-nextslideatend="true"
		style="z-index: 8"
		data-vimeoid="29298709"
		data-videoattributes="enablejsapi=1&html5=1&hd=1&wmode=opaque&showinfo=0&rel=0"
		data-videocontrols="controls"
		data-videowidth="640"
		data-videoheight="360">
</div>

FullWidth Version (/i.e.)

 <div class="tp-caption sfl fadeout fulllscreenvideo tp-videolayer"
		data-x="0"
		data-y="0"
		data-speed="600"
		data-start="1000"
		data-easing="Power4.easeOut"
		data-endspeed="500"
		data-endeasing="Power4.easeOut"
		data-autoplay="true"
		data-autoplayonlyfirsttime="true"
		data-nextslideatend="true"
		style="z-index: 8"
		data-vimeoid="29298709"
		data-videoattributes="enablejsapi=1&html5=1&hd=1&wmode=opaque&showinfo=0&rel=0"
		data-videocontrols="controls"
		data-videowidth="100%"
		data-videoheight="100%">
</div>

HTML5 Video via Video Markups

The HTML5 Files are only loaded if the html5 video markup exist.

Boxed Version (i.e.)

<div class="caption randomrotate "
   data-x="20"
   data-y="80"
   data-speed="300"
   data-start="2100"
   data-easing="easeOutExpo"
   data-autoplay="true"
   data-nextslideatend="false">
<video class="" controls preload="none" width="600" height="240"
  poster="http://video-js.zencoder.com/oceans-clip.png" >
   <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
   <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
   <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
   <track kind="captions" src="demo.captions.vtt" srclang="en" label="English" />
</video>
</div>

FullWidth Version (i.e.)

<div class="caption randomrotate fullscreenvideo"
   data-x="0"
   data-y="0"
   data-speed="300"
   data-start="2100"
   data-easing="easeOutExpo"
   data-autoplay="true"
   data-nextslideatend="true">
<video class="" controls preload="none" width="100%" height="100%"
     poster="http://video-js.zencoder.com/oceans-clip.png" >
   <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
   <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
   <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
   <track kind="captions" src="demo.captions.vtt" srclang="en" label="English" />
</video>
</div>

HTML5 Video via Options

Boxed version

<div class="tp-caption sfl fadeout tp-videolayer"
		data-x="center" data-hoffset="134"
		data-y="center" data-voffset="-6"
		data-speed="600"
		data-start="1000"
		data-easing="Power4.easeOut"
		data-endspeed="500"
		data-endeasing="Power4.easeOut"
		data-autoplay="true"
		data-autoplayonlyfirsttime="false"
		data-nextslideatend="true"
		data-videowidth="640"
		data-videoheight="320"
		data-videopreload="meta"
		data-videomp4="http://themepunch.com/revolution/wp-content/uploads/2014/05/among_the_stars.mp4"
		data-videowebm="http://themepunch.com/revolution/wp-content/uploads/2014/05/among_the_stars.webm"
		data-videocontrols="none"
		data-forcecover="0"
		data-forcerewind="off"
		data-aspectratio="16:9"
		data-volume="mute"
		data-videoposter="http://themepunch.com/revolution/wp-content/uploads/2014/05/video_space_cover.jpg"
>
</div>

FullWidth Version (/i.e.)

 <div class="tp-caption sfl fadeout fulllscreenvideo tp-videolayer"
		data-x="0"
		data-y="0"
		data-speed="600"
		data-start="1000"
		data-easing="Power4.easeOut"
		data-endspeed="500"
		data-endeasing="Power4.easeOut"
		data-autoplay="true"
		data-autoplayonlyfirsttime="false"
		data-nextslideatend="true"
		data-videowidth="100%"
		data-videoheight="100%"
		data-videopreload="meta"
		data-videomp4="http://themepunch.com/revolution/wp-content/uploads/2014/05/among_the_stars.mp4"
		data-videowebm="http://themepunch.com/revolution/wp-content/uploads/2014/05/among_the_stars.webm"
		data-videocontrols="none"
		data-forcecover="1"
		data-forcerewind="on"
		data-aspectratio="16:9"
		data-volume="mute"
		data-videoposter="http://themepunch.com/revolution/wp-content/uploads/2014/05/video_space_cover.jpg">
</div>

Banner Timer

In order to use a banner timer, you will need to add the markup within the banner or fullwidthbanner divs.

The markup should look like :

Top Positioned Banner Timer:

<div class="tp-bannertimer"></div>

Bottom Positioned Banner Timer:

<div class="tp-bannertimer tp-bottom"></div>

To Hide the Banner Timer:

To remove this timer just simple set the option to hideTimerBar:"on" due the Initialising process

In case you wish to show a single image instead of the Slider on Slower Browsers / mobiles, please simple use the aimg and aie8, amobile data attributes as shown here

<div class="tp-banner" data-aimg="../examples&source/images/slidebg1.jpg" data-aie8="enabled" data-amobile="enabled">...

Auto-Responsive Layout

Responsive means that the slider will adjust to every screen width. The Sourrounding Container Size will define the Max width of the Slider. The Height will be auto calculated.

The basic containers are build like this ( in none Fullwidth, but 4 Level Responsive Version):

 .bannercontainer {
	width:100%;
	position:relative;
	padding:0;
}
.banner{
    width:100%;
	position:relative;
}

FullScreen Layout

You can use the Slider also in FullScreen mode. It will need to have the possiblity to use the full width of the screen, means do not wrap it in any boxed container. For Fullscreen simple use the following markups and styles:

The markup could look like:

<div class="fullscreen-container">
    <div class="fullscreenbanner">
    </div>
</div>

The Style has 100% width and height simple.

.fullscreen-container {
width:100%;
position:relative;
padding:0;
}

Dont forget to use the option fullScreen:"on" to use in the initialisation. If you wish to have an offset, which allows you to add i.e. a Menu over the fullscreen slider, just use the fullScreenOffsetContainer: option and set it to the container which wrapps the menu i.e

The slider offers a public API which you can use to control component inside the Slider from within your own scripts. To access this api, use the following code.

var tpj=jQuery;
tpj.noConflict();
tpj(document).ready(function() {
if (tpj.fn.cssOriginal!=undefined)
    tpj.fn.css = tpj.fn.cssOriginal;
    var api = tpj('.banner').revolution(
    ....

You can see in the example index-responsive-API.html how to use the different functions, and how to get the trigered Events.

Once this is done you may use any of the following functions:

api.revpause() - Stops the Timer and autoplay
api.revresume() - Starts the Timer and resume to autoplay
api.revprev() - Change to previous slide
api.revnext() - Change to next slide
api.revshowslide(n) - Change to the slide with index Nr. (n)
api.revmaxslide() - Show the amount of slides
api.revscroll() - Scrollt Body under the Slide in FullScreen mode

Or you may use any of the following Events:

revolution.slide.onchange - Event is triggered when Slide has been rotated. data value will give you the current slide. i.e.

api.bind("revolution.slide.onchange",function (e,data) {

jQuery('#callbackinfo').html('Last Event: Slide Changed to '+data.slideIndex);

});
revolution.slide.onpause - Event is triggered when Slider is on Pause
revolution.slide.onresume - Event is triggered when Slider is back from Pause
revolution.slide.onvideoplay - Event is triggered when YouTube or Vimeo Video has been started (only Online Mode !)
revolution.slide.onvideostop - Event is triggered when YouTube or Vimeo Video has been stopped or Slide has been rotated (only Online Mode !)
revolution.slide.onstop - - Event is triggered when slider has been stopped due the Loop and stop at Slide parameters
revolution.slide.onbeforeswap - - Event is triggered when slider is going to change to next slide
revolution.slide.onafterswap - - Event is triggered when slider has finnishded the change of the transition (full transition finnished)
revolution.slide.onloaded - - Event is triggered when slider is loaded and it is prepared

Used Assets

jQuery WaitForImages 1.4
https://github.com/alexanderdickson/waitForImages
Licensed under the MIT licenses.

Template demo images licensed from Fotolia for preview usage. Please do not attempt to rip the images from the preview!

Touch Wipe jQuery Plugin

If you face problems with the installation or customization of our product please do not hesitate to contact us via our support ticket system:

http://themepunch.ticksy.com

Slider Revolution Responsive jQuery Slider

How to start

What files do I need to upload to my server?

Implement the jQuery

Add Revolution js and css files to your HTML page

Create a Container for the Banner

Auto-Responsive Style

FullScreen Style

Create Your First Slides

Call the jQuery Plugin to build the Slider

Options

The Options to Initialise the Plugin (Theme Sorted):

Global Settings:

Navigation Settings:

Loops

Mobile Visibility

Layout Styles

Parallax Settings

Pan Zoom Settings

Further Options

Slides

Slide Options

Transition Effects

Links (Full Slide Links)

Thumbnail

Title

The Main Image

Simple Image

Colored Background Instead of Image

Lazy Loaded Image

Tiled Image

Fitting Image

Covering Image

Bottom Right Aligned Covering Image

Ken Burns Animation on Image

Image Attributes

The Captions / Layers

Caption Classes

Incoming animation Classes:

Outgoing animation Classes:

Custom Incoming / OutGoing settings:

Caption data- settings

Special Classes within the Caption container

Loop Animations Within the Layers

Static Layers

Add your Static Layers into the static layer wrapper under the <ul> tag within the Slider !

Media in Slide

YouTube Video via iFrame

YouTube Video via Options

Vimeo Video via iFrame

Vimeo Video via Options

HTML5 Video via Video Markups

HTML5 Video via Options

Banner Timer

Banner Timer

Top Positioned Banner Timer:

Bottom Positioned Banner Timer:

To Hide the Banner Timer:

Alternative Image for IE8 and Mobile Devices

Responsive Layouts

Auto-Responsive Layout

FullScreen Layout

API Functions and Events

Licenses

Support