# Revolution Responsive jQuery Slider

## The Documentation

## Created

- By: ThemePunch
- www.codecanyon.com/user/themepunch
- Email: info@themepunch.com

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

### Install

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.

#### 00 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 an example index.html and index-fullwidth.html in your downloaded zip.

#### 01 Implement the jQuery

Add the following lines to your HTML Head:

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

###

#### 02 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 .

#### 03 A Create the surrounding DIV for your Slider (Responsive, none Full Width)

Put it in the HTML:

    <div class="banner-container">

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

    </div>

#### 03 B Create the surrounding DIV for your Slider (Responsive, Full Width Slider)

Put it in the HTML:

    <div class="fullwidthbanner-container">

       <div class="fullwidthbanner">...</div>

    </div>

####

#### 04 Put an unordered list inside to hold the different slides as list elements

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

#### 05 Call the jQuery Plugin to build the Slider

    <script type="text/javascript">
          var tpj=jQuery;               // MAKE JQUERY PLUGIN CONFLICTFREE
          tpj.noConflict();

          tpj(document).ready(function() {

                       if (tpj.fn.cssOriginal!=undefined)   // CHECK IF fn.css already extended
                       tpj.fn.css = tpj.fn.cssOriginal;

                        tpj('.banner').revolution(
                            {
                                delay:9000,
                                startheight:490,
                                startwidth:890,

                                hideThumbs:200,

                                thumbWidth:100,
                                thumbHeight:50,
                                thumbAmount:5,

                                navigationType:"both",
                                navigationArrows:"nexttobullets",
                                navigationStyle:"round",
                                touchenabled:"on",
                                onHoverStop:"on",

                                navOffsetHorizontal:0,
                                navOffsetVertical:20,

                                hideCaptionAtLimit:0,
                                hideAllCaptionAtLilmit:0,
                                hideSliderAtLimit:0,

                                stopAtSlide:-1,
                                stopAfterLoops:-1,

                                shadow:1,
                                fullWidth:"off"

                            });
    </script>

### Markup

The items markup uses javascript/jQuery to transform a block of HTML markup into the slider, all customization is done trough the use of HTML5 data attributes and CSS. The markup is valid for HTML5 rules and the content will be fully indexed by search engines. The general structure of markup follows this schema:

#### 01 Two surrounding DIVs are the basic holder for your Slider:

Put it in the HTML for Responsive but none FullWidth version:

    <div id="banner_container">
       <div id="banner" >...</div>
    </div>

Put it in the HTML for Responsive version:

    <div id="fullwidthbanner-container">
       <div id="fullwidthbanner" >...</div>
    </div>

The outside container could be used by one of your divs in your page and is needed for the responsive part.
To get more know about the fullwidth and/or responsive containers, see our style.css examples.

#### 02 An unordered list inside holds the different slides as list elements

    <ul>
    <!-- THE BOXSLIDE EFFECT EXAMPLES  WITH LINK ON THE MAIN SLIDE EXAMPLE -->

    	<li data-transition="flyin" data-slotamount="5"  data-thumb="images/thumbs/regular_thumb1.jpg">
    							<img src="images/slides/newslide1.jpg">

    							<div class="caption randomrotate fadeout medium_grey"
    							                   data-x="40" data-y="20"
    											   data-speed="900" data-start="1900" data-easing="easeOutBack"
    											   data-linktoslide="4">jump slide 4</div>

    							<div class="caption randomrotate fadeout medium_grey"
    							                  data-x="40" data-y="50"
    											  data-speed="900" data-start="2100" data-easing="easeOutBack"
     											  data-linktoslide="prev">prev slide</div>

    							<div class="caption randomrotate fadeout medium_grey"
    												data-x="40" data-y="80"
    												data-speed="900" data-start="2100" data-easing="easeOutBack"
    												data-linktoslide="next">next slide</div>

    							<div class="caption lfr randomrotateout big_white"
    												data-x="400" data-y="80"
    												data-speed="900" data-start="1700" data-easing="easeOutBack"
    												data-end="3300" data-endspeed="1000" data-endeasing="easeInOutBack"
    												data-linktoslide="4">Kickstart Your Website</div>

    							<div class="caption lfb big_orange"
    												data-x="400" data-y="80"
    												data-speed="1500" data-start="3000" data-easing="easeOutBack">
    												Some Caption Here</div>

    	</li>
    ...
    </ul>

The next chapter describes the inner of this list elements.
The more advanced users will have no problems in customizing the slider up to every detail and create their own sliders with using the CSS files.
The CSS file responsible for the layout of your slider is the settings.css. Find All Responsive Settings and Docu later in "Responsive Captions".

### Layout

#### 01 The Default parameters of the Plugin

- delay The time one slide stays on the screen in Milliseconds (Default: 9000)
- startheight Basic Height of the Slider in the desktop resolution in pixel, other screen sizes will be calculated from this (Default: 490) It should be similiar to the settings of the style sheet. If you use a fullwidth banner, ti will deinfe the max. Height of the banner by resizing of the browser. The banner wont ne heigher than this value.
- startwidth Basic Width of the Slider in the desktop resolution in pixel, other screen sizes will be calculated from this (Default: 890) It should be similiar to the settings of the style sheet. If you use a fullwidth banner, ti will deinfe the max. Width of the banner by resizing of the browser.
- hideThumbs Time after that the Thumbs will be hidden(Default: 200),
- navigationType Display type of the navigation bar (Default:"none")
  Options:
  bullet
  thumb ** In Fullwidth version thumbs wont be displayed if navigation offset set to shwop thumbs outside of the container ! Thumbs must be showen in the container!
  none
  both
- navigationArrows Display position of the Navigation Arrows (Default: "nexttobullets")
  Options:
  nexttobullets
  verticalcentered ** By navigation Type Thumb arrows always centered or none visible
  none
- navigationStyle Look of the navigation bullets (Default: "round")
  Options:
  round
  navbar
  round-old
  square-old
  navbar-old ** If you choose navbar-old, we recommend to choose Navigation Arrows to nexttobullets
- touchenabled Enable Swipe Function on touch devices (Default: "on")
  Options:
  on
  off
- navOffsetHorizontal The Bar is centered but could be moved this pixel count left(e.g. -10) or right (Default: 0) ** By resizing the banner, it will be always centered !!
- navOffsetVertical The Bar is bound to the bottom but could be moved this pixel count up (e. g. -20) or down (Default: 20)
- shadow The Shadow display underneath the banner
  Options:
  0 No Shadow
  1
  2
  3
- onHoverStop Stop the Timer when hovering the slider
  Options:
  on
  off
- thumbWidth the basic Width of one Thumbnail (only if thumb is selected. Default:100)
- thumbHeight the basic Height of one Thumbnail (only if thumb is selected Default 50)
- thumbAmount the amount of the Thumbs visible same time (only if thumb is selected)
  ** All Thumbs will be hidden in smallest Responsive Level, and in smaller level default size is reseted to 60x30px. Can be modificated in the settings.css file)
- hideCaptionAtLimit It Defines if a caption should be shown under a Width Limit ( Basod on The Width of Banner ! ) You need to define the captions which should be shown seperately with data-captionhidden="on/off"
- hideAllCaptionAtLilmit Hide all The Captions if Width of Browser is less then this value
- hideSliderAtLimit under this Limit the Slider is hidden and the timer is stopped
- fullWidth on/off It turns on the Horizontal Centering of Images in FullWidth version. In Case the Image is bigger then the container width, it fits the image with its height in the container and centers horizontally.
- stopAtSlide -1 or 1 to 999. Stop at selected Slide Number. If set to -1 it will loop without stopping. Only available if stopAfterLoops is not equal -1 !
- stopAfterLoops -1 or 0 to 999. Stop at selected Slide Number (stopAtSlide) after slide looped "x" time, where x this Number. If set to -1 it will loop without stopping. Only available if stopAtSlide not equal -1 !

#### 02 Slider items

<li> - Every list item represents a new banner/slider item.
Transition effects and a possible slide link are defined here:

- data-transition The appearance transition of this slide
  Options:
  boxslide
  boxfade
  slotzoom-horizontal
  slotslide-horizontal
  slotfade-horizontal
  slotzoom-vertical
  slotslide-vertical
  slotfade-vertical
  curtain-1
  curtain-2
  curtain-3
  slideleft
  slideright
  slideup
  slidedown
  fade
  random
  slidehorizontal
  slidevertical
  papercut
  flyin
  turnoff
  cube
  3dcurtain-vertical
  3dcurtain-horizontal
- data-masterspeed Set the Speed of the Slide Transition. Default 300, min:100 max:2000.
- data-slotamount The number of slots or boxes the slide is divided into. If you use boxfade, over 7 slots can be juggy.
- data-link A link on the whole slide pic
- data-target A link target (like _self or _blank)
- data-linktoslide If data-link="slide" is set, you can define a slide where to jump in case the image has been clicked.
- data-delay A new Dealy value for the Slide. If no delay defined per slide, the dealy defined via Options will be used
- data-thumb An Alternative Source for thumbs. If not defined a copy of the background image will be used in resized form

Each List item must include:

- an image <img> as Background Image / Main Image with Data of the thumb
  OR
- a colored background image AND a coloredbg caption which is full width/height defined !!

      <img src="images/slides/coloredbg.png"  data-fullwidthcentering="off">
      <div class="caption coloredbg fade" data-x="0" data-y="0" data-speed="10" data-start="0" style="background-color:#ff9118; width:100%;height:100%"></div>

Each List item can include:

- some <div>s containing captions (class="caption"), this could contain embedded video iframes also

    <li data-transition="boxslide" data-slotamount="7" data-link="http://www.google.de">
       <img src="images/slides/image1.jpg"  data-fullwidthcentering="off">
       <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>

#### Fulwidth Image Vertical Centering

Basically Fullwidth Slider will Align main images to the top and centering horizontally. If Vertically Centering is requested, use the data-fullwidthcentering per <img> Possible valuse are "on" or "off"

#### 03 Captions

Captions are Containers which can be customized via CSS, classes for the start animation and some data options.
The CSS for the caption added in the settings.css file because it depends strongly on the responsive Sizing.
There are 4 Steps of Responsive Contents which are written later below under the Responsive Dependencies Caption.
You find an example in the settings.css of our item download.
The options are in detail:

- color class example big_white, big_orange, medium_grey (check the settings.css of the example for details)
- Class for Incoming Animations
  Options:
  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
  fade - fading
  randomrotate- Fade in, Rotate from a Random position and Degree
- Class for Outgoing Animations (only during the Slide).
  This is Optional. If not set, but endtime is set via data-end than the same animation type will be used as for incoming animation.
  Options:
  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
  fadeout - fading
  randomrotateout- Fade in, Rotate from a Random position and Degree
- data-x The horizontal position in the standard (via startwidth option defined) screen size (other screen sizes will be calculated)
- data-y vertical position in the standard (via startheight option defined) screen size (other screen sizes will be calculated)
- data-speed duration of the animation in milliseconds
- data-start after how many milliseconds should this caption start to show
- data-easing special easing effect of the animation. Options:
  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 duration of the animation when caption leaves the stage in milliseconds
- data-end after how many milliseconds should this caption leave the stage (should be bigger than data-start+data-speed !
- data-endeasing special easing effect of the animation. Options:
  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

####
04 Videos

In order to embed videos in the slider you can embed videos via iframe of your favorite video site that allows this kind of embedding. An example with Vimeo:

    <li data-transition="slideup" data-slotamount="20">
    <img src="images/slides/image20.jpg"  >
    			<div class="caption lfb boxshadow" data-x="70" data-y="120" data-speed="900"
    			     data-start="500" data-easing="easeOutBack">
    			     <iframe src="http://player.vimeo.com/video/29298709?title=0&amp;byline=0&amp;portrait=0" width="460"
    				 height="259"></iframe>
    			</div>
    </li>

##### Full Screen Video

In order to play FullWidth Videos, use the class "fade fullscreenvideo" in the caption where you embeded the iFrame. Use data-x="0" and data-y="0" and data-speed="500" and data-start="10" for best effect. The Width and height of the iFrame should be 100% !

In case you wish to use autoplay, just use the data-autplay="true" parameter in the div where you embeded the iFrame.

    <li data-transition="slideup" data-slotamount="20">
    <img src="images/slides/image20.jpg"  >
    			<div class="caption fade fullscreenvideo" 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" width="100%"
    				height="100%"></iframe>
    			</div>
    </li>

####
05 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 :
<div class="tp-bannertimer"></div>
The use the Timer on the bottom just add the tp-bottom class to the timer like this :
<div class="tp-bannertimer tp-bottom"></div>
To remove this timer just simple remove the markup from the container, and that is it.

### Responsive Basic

Responsive means that the slider will adjust to every screen width.

To achieve that you have to set a bunch of mediaqueries that will adjust the whole slider when a certain window size is used, or you will need to use our fullwidth style version, to let the banner always resize itself.
The basic containers are build like this ( in none Fullwidth, but 4 Level Responsive Version):

     .bannercontainer {
        padding:5px;
        background-color:#fff;
        width:890px;
        position:relative;
        margin-left:auto;
        margin-right:auto;
    }

    .banner{
        width:890px;    // MUST BE THE SAME AS IN THE OPTIONS startwidth
        height:490px;    // MUST BE THE SAME AS IN THE OPTIONS startheight
        position:relative;
        overflow:hidden;
    }

The media queries that build the screen dependend container sizes:

    @media only screen and (min-width: 768px) and (max-width: 959px) {
       .banner, .bannercontainer{  width:750px; height:412px;}
        .bannershadow {width:750px;}
    }

    @media only screen and (min-width: 480px) and (max-width: 767px) {
      .banner, .bannercontainer{width:470px; height:258px;}
      .bannershadow {width:470px;}
    }

    @media only screen and (min-width: 0px) and (max-width: 479px) {
       .banner, .bannercontainer{width:300px;height:165px;}
       .bannershadow {width:300px; margin-top:-5px;}
    }

#### Calculate the Resopnsive sizes

Here we can give you a short calculating example. The Width of the Responsive container depending on you in the different browser views. the height can be calculated via a simple example:

new width / original width * original height. So in our Examplce (step 1.) 750 / 890 * 490 == 413px

### Fullwidth

This slider can go fullwidth too. We have added an index-fullwidth.html example for you in the zip.

Please note the basic change in the markup.

The surrounding containers are:

    <div class="fullwidthbanner-container">

       <div class="fullwidthbanner">...</div>

    </div>

The CSS is not splitted with Media-Queries but has a basic 100% value for width:

    .fullwidthbanner-container{
       width:100% !important;
       position:relative;
       padding:0;
       max-height:450px !important;  // Same value as in OPTIONS the startheight parameter
       overflow:hidden;
    }

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

- 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

Or you may use any of the following Events:

- revolution.slide.onchange - Event is triggered when Slide has been rotated
- 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

### Licenses

Used Assets

- Template demo images licensed from Fotolia for preview usage. Please do not attempt to rip the images from the preview!
- cssAnimate Plugin Great and Simple cssAnimate jQuery Plugin
- WaitForImages jQuery Plugin
- Touch Wipe jQuery Plugin

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