For support please checkout http://themepunch.com !
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.
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..
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>
- <!-- 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" />
- <div class="bannercontainer">
- <div class="banner">...</div>
- </div>
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;
- }
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:
Put this in your CSS File
- .bannercontainer {
- width:100%;
- position:relative;
- padding:0;
- }
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>
(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>
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.
- <img src="images/slides/slide13.jpg" >
- <img src="images/slides/transparent.png" style="background-color:#56e34a" >
- <img src="images/slides/dummy.jpg" data-lazyload="images/slides/slide13.jpg">
- <img src="images/slides/slide13.jpg" data-bgrepeat="repeat" data-bgfit="normal" data-bgposition="center center">
- <img src="images/slides/slide13.jpg" data-bgrepeat="no-repeat" data-bgfit="contain" data-bgposition="center center">
- <img src="images/slides/slide13.jpg" data-bgrepeat="no-repeat" data-bgfit="cover" data-bgposition="center center">
- <img src="images/slides/slide13.jpg" data-bgrepeat="no-repeat" data-bgfit="cover" data-bgposition="right bottom">
- <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">
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.
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:
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/T8--OggjJKQ?enablejsapi=1&html5=1&hd=1&wmode=opaque&controls=1&showinfo=0;rel=0;" width="460" height="259"></iframe>
- </div>
You may need to use the origina=http://yourdomain or origin=https://yourdomain for YT Api issues !
- <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/T8--OggjJKQ?enablejsapi=1&html5=1&hd=1&wmode=opaque&controls=1&showinfo=0;rel=0;" width="100%" height="100%"></iframe>
- </div>
You may need to use the origina=http://yourdomain or origin=https://yourdomain for YT Api issues !
- <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&byline=0&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&byline=0&portrait=0;api=1" width="100%" height="100%"></iframe>
- </div>
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>
- <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 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.
- .bannercontainer {
- width:100%;
- position:relative;
- padding:0;
- }
- .banner{
- width:100%;
- position:relative;
- }
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;
- }
- 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(
- ....
Used Assets
If you face problems with the installation or customization of our product please do not hesitate to contact us via our support ticket system: