# SLIDER REVOLUTION - The Responsive Slider Plugin

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18

- VIMEO
  AUTOPLAY - FALSE
  AUTO NEXT SLIDE - FALSE
  AUTO PLAY ONLY ONCE - FALSE
- YOUTUBE
  AUTOPLAY - TRUE
  AUTO NEXT SLIDE - TRUE
  AUTO PLAY ONLY ONCE - TRUE
- YOUTUBE
  AUTOPLAY - FALSE
  AUTO NEXT SLIDE - TRUE
  THUMBNAIL IMAGE - TRUE
- HTML5
  AUTOPLAY - TRUE
  AUTO NEXT SLIDE - FALSE
  AUTO PLAY ONLY ONCE - FALSE
- HTML5
  CONTROLS - NONE
  LOOP - TRUE
  FULLSCREEN VIDEO

## How to Embed Videos in the Slider ?

You can embed Vimeo, YouTube and HTML5 Videos as Video Captions. Within a video you can set autoplay, autoplay only first time, loop (html5), nocontrol(html5), thumbnails for videos, fullscreen or predefined size.

### Important options in Plugin Initialisation:

    		<script type="text/javascript">
    		var revapi;
    		jQuery(document).ready(function() {
    			   revapi = jQuery('.tp-banner').revolution(
    				{
    					delay:9000,
    					startwidth:1170,
    					startheight:500,
    					hideThumbs:10,
    					videoJsPath:"rs-plugin/videojs/"

    				});
    		});
    		</script>

### YouTube Example - AutoPlay and Next Slide at End of the Video turned on

    		<div class="tp-caption sft customout"
    			data-x="center" data-hoffset="134"
    			data-y="center" data-voffset="-6"
    			data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
    			data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
    			data-speed="600"
    			data-start="1000"
    			data-easing="Power4.easeOut"
    			data-endspeed="500"
    			data-endeasing="Power4.easeOut"
    			data-autoplay="true"
    			data-autoplayonlyfirsttime="false"
    			data-nextslideatend="true"
    		>
    			<iframe src='http://www.youtube.com/embed/T8--OggjJKQ?enablejsapi=1&html5=1&hd=1&wmode=opaque&controls=1&showinfo=0;rel=0;' width='640' height='360'
    			           style='width:640px;height:360px;'>
    			</iframe>

    		</div>

### Vimeo Example - AutoPlay on First Time and Next Slide at End of the Video turned on.

    		<div class="tp-caption sft customout"
    			data-x="center" data-hoffset="134"
    			data-y="center" data-voffset="-6"
    			data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
    			data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
    			data-speed="600"
    			data-start="1000"
    			data-easing="Power4.easeOut"
    			data-endspeed="500"
    			data-endeasing="Power4.easeOut"
    			data-autoplay="true"
    			data-autoplayonlyfirsttime="true"
    			data-nextslideatend="true"
    		>
    			<iframe src='http://player.vimeo.com/video/76512663?title=0&byline=0&portrait=0;api=1' width='640' height='360'
    			           style='width:640px;height:360px;'>
    			</iframe>

    		</div>

### HTML5 Example - Autoplay On, Loop but with Controls, and in Fullscreen.

    		<div class="tp-caption sft customout fullscreenvideo"
    			data-x="center" data-hoffset="134"
    			data-y="center" data-voffset="-6"
    			data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
    			data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
    			data-speed="600"
    			data-start="1000"
    			data-easing="Power4.easeOut"
    			data-endspeed="500"
    			data-endeasing="Power4.easeOut"
    			data-autoplay="true"
    			data-autoplayonlyfirsttime="true"
    			data-nextslideatend="true"
    		>
    			<video class="video-js vjs-default-skin" preload="none" loop  controls 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>

### YouTube Example - With Thumbnail Image over Video

    		<div class="tp-caption sft customout"
    			data-x="center" data-hoffset="134"
    			data-y="center" data-voffset="-6"
    			data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
    			data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
    			data-speed="600"
    			data-start="1000"
    			data-easing="Power4.easeOut"
    			data-endspeed="500"
    			data-endeasing="Power4.easeOut"
    			data-autoplay="true"
    			data-autoplayonlyfirsttime="false"
    			data-nextslideatend="true"
    			data-thumbimage="images/bg3.jpg"
    		>
    			<iframe src='http://www.youtube.com/embed/T8--OggjJKQ?enablejsapi=1&html5=1&hd=1&wmode=opaque&controls=1&showinfo=0;rel=0;' width='640' height='360'
    			           style='width:640px;height:360px;'>
    			</iframe>

    		</div>