Revolution Responsive jQuery Slider

<!-- 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" />

Create a Container for the Banner

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

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

.banner{
width:960px;
height:500px;
position:relative;
overflow:hidden;
}

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


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

@media only screen and (min-width: 0px) and (max-width: 479px) {
      .banner, .bannercontainer { width:320px;height:166px; }
}

.bannercontainer{
width:100% !important;
position:relative;
padding:0;
max-height:500px !important;
overflow:hidden;
}

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

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

<script type="text/javascript">

   var tpj=jQuery;
   tpj.noConflict();
   tpj(document).ready(function() {
      if (tpj.fn.cssOriginal!=undefined)
      tpj.fn.css = tpj.fn.cssOriginal;
      tpj('.fullscreenbanner').revolution({
         delay:9000,
         startwidth:960,
         startheight:500,

         onHoverStop:"on",

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

         hideThumbs:0,

         navigationType:"bullet",
         navigationArrows:"solo",
         navigationStyle:"round",
         navigationHAlign:"left",
         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,

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

         shadow:0

      });

   });

</script>

• 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

Layout Styles

• fullWidth
  
  Possible Values: "on", "off"  - defines if the fullwidth mode is activated
   
• 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)
   
• videoJsPath
  
  The Path to the VideoJs Files which are basically always under the rs-plugin/videojs/ folder.  Default setting: videoJsPath:"rs-plugin/videojs/"
   

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
  fade - fading
  randomrotate- Fade in, Rotate from a Random position and Degree
  
  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

  fadeout - fading

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

   

   

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-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:
  
  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:
  
  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)
   
• 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 
   

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

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

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

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

 .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;
}

@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;}
}

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

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

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% !important;
position:relative;
padding:0;
height:100%;
}