Revolution Responsive jQuery Slider

The Documentation

Created

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 :

The use the Timer on the bottom just add the tp-bottom class to the timer like this :

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