Slider Revolution Responsive jQuery Slider

Slider Revolution Responsive jQuery Slider


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

How to start

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:

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.plugins.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('.fullscreenbanner').revolution({
         delay:9000,
         startwidth:960,
         startheight:500,
         autoHeight:"off",
         fullScreenAlignForce:"off",

         onHoverStop:"on",

         thumbWidth:100,
         thumbHeight:50,
         thumbAmount:3,

         hideThumbsOnMobile:"off",
         hideBulletsOnMobile:"off",
         hideArrowsOnMobile:"off",
         hideThumbsUnderResoluition:0,

         hideThumbs:0,

         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",

         stopAtSlide:-1,
         stopAfterLoops:-1,
         hideCaptionAtLimit:0,
         hideAllCaptionAtLilmit:0,
         hideSliderAtLimit:0,

         dottedOverlay:"none",

         fullWidth:"off",
         forceFullWidth:"off"
         fullScreen:"off",
         fullScreenOffsetContainer:"#topheader-to-offset",

         shadow:0

      });

   });

</script>

 

Options

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:
  • 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 navigation 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: "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"
     
Loops
  • 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

  • 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
  • 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
     
  • 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 !
     
  • 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.
     
  • videoJsPath

    The Path to the VideoJs Files which are basically always under the rs-plugin/videojs/ folder.  Default setting: videoJsPath:"rs-plugin/videojs/"
     

 

Slides

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
Links (Full Slide Links)
Thumbnail

 

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

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
     
  • Styleing 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
     
  • 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

 

 
Special Classes within the Caption container

 

 

Media in Slide

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:

 

YouTube Video in Slide

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/YHWkro9-e9Q?hd=1&amp;wmode=opaque&amp;controls=1&amp;showinfo=0" width="460" height="259"></iframe>
</div>

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/YHWkro9-e9Q?hd=1&amp;wmode=opaque&amp;controls=1&amp;showinfo=0" width="100%" height="100%"></iframe>
</div>
 
 

Vimeo Video

 
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>
 

HTML5 Video (videoJS)

The VideoJs Files are only loaded if the html5 video markup exist. Please do not forget to add the videoJsPath in the initialising Options ! 

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="video-js vjs-default-skin" controls preload="none" width="600" height="240"
  poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}">

   <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="video-js vjs-default-skin" controls preload="none" width="100%" height="100%"
     poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}">

   <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>
 

 

Responsive Layouts

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
 
 

API Functions and Events

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:
 
 
Or you may use any of the following Events:
 

Licenses

Used Assets

 

Support

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