1. Start
  2. Install
  3. Markup
  4. Layout
  5. Responsive Basic
  6. Fullwidth
  7. Public Api
  8. Licenses
  9. Support

Revolution Responsive jQuery Slider

The Documentation

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:

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,
                           
                            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 And FullWidth 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="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>
 
 
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
    square
    navbar   ** If you choose navbar, 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)
  • 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:
 
Each List item must include:

Each List item can include:

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

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:
 


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

 

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:

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