欧博 革命 jQuery 滑块响应式滑块

本章将为您提供有关如何安装滑块和设置选项的一般说明。如有需要，后续章节将更详细地介绍。

我需要将哪些文件上传到我的服务器？

请上传 rs-plugin 文件夹到您的服务器。在此文件夹中，您将找到包含所有项目内容的以下子文件夹：

• js
• css
• assets

您可以使用自己的 jQuery，但我们建议直接从 Google 资源加载它（请参阅本文档后面的内容）。

您会在下载的 zip 文件中找到许多 examples 在 examples&sources 文件夹下。 

实现 jQuery

将以下行添加到您的 HTML Head： 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js></script>

将 Revolution js 和 css 文件添加到您的 HTML 页面

<!-- jQuery REVOLUTION Slider  -->
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.tools.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>

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

.banner{
	width:100%;
	position:relative;
}

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

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

   jQuery(document).ready(function() {
      jQuery('.banner').revolution({
         delay:9000,
         startwidth:960,
         startheight:500,
         startWithSlide:0,

         fullScreenAlignForce:"off",
         autoHeight:"off",
         minHeight:"off",

         shuffle:"off",

         onHoverStop:"on",

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

         hideThumbsOnMobile:"off",
         hideNavDelayOnMobile:1500,
         hideBulletsOnMobile:"off",
         hideArrowsOnMobile:"off",
         hideThumbsUnderResoluition:0,

         hideThumbs:0,
         hideTimerBar:"off",

         keyboardNavigation:"on",

         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",
         swipe_velocity:"0.7",
         swipe_max_touches:"1",
         swipe_min_touches:"1",
         drag_block_vertical:"false",

         parallax:"mouse",
         parallaxBgFreeze:"on",
         parallaxLevels:[10,7,4,3,2,5,4,3,2,1],
         parallaxDisableOnMobile:"off",

         stopAtSlide:-1,
         stopAfterLoops:-1,
         hideCaptionAtLimit:0,
         hideAllCaptionAtLilmit:0,
         hideSliderAtLimit:0,

         dottedOverlay:"none",

         spinned:"spinner4",

         fullWidth:"off",
         forceFullWidth:"off"
         fullScreen:"off",
         fullScreenOffsetContainer:"#topheader-to-offset",
         fullScreenOffset:"0px",

         panZoomDisableOnMobile:"off",

         simplifyAll:"off",

         shadow:0

      });

   });

</script>

初始化插件的选项（主题排序）：

全局设置：

幻灯片选项

过渡效果

• data-transition
  
  此幻灯片的出现过渡。您可以定义多个，因此在每次循环中将显示下一个幻灯片过渡类型。
  
  
  Flat Transitions: 
  
  向上滑动 - slideup
  向下滑动 - slidedown
  向右滑动 - slideright
  向左滑动 - slideleft
  水平滑动（取决于下一个/上一个） - slidehorizontal
  垂直滑动（取决于下一个/上一个） - slidevertical
  盒子滑动 - boxslide
  水平滑块 - slotslide-horizontal
  垂直滑块 - slotslide-vertical
  淡入盒子 - boxfade
  水平淡入 - slotfade-horizontal
  垂直淡入 - slotfade-vertical
  从右侧淡入和滑动 - fadefromright
  从左侧淡入和滑动 - fadefromleft
  从顶部淡入和滑动 - fadefromtop
  从底部淡入和滑动 - fadefrombottom
  淡入左侧并从右侧淡出 - fadetoleftfadefromright
  淡入右侧并从左侧淡出 - fadetorightfadefromleft
  淡入顶部并从底部淡出 - fadetotopfadefrombottom
  淡入底部并从顶部淡出 - fadetobottomfadefromtop
  向右视差 - parallaxtoright
  向左视差 - parallaxtoleft
  向上视差 - parallaxtotop
  Parallax to Bottom - parallaxtobottom
  Zoom Out and Fade From Right - scaledownfromright
  Zoom Out and Fade From Left - scaledownfromleft
  Zoom Out and Fade From Top - scaledownfromtop
  Zoom Out and Fade From Bottom - scaledownfrombottom
  ZoomOut - zoomout
  ZoomIn - zoomin
  Zoom Slots Horizontal - slotzoom-horizontal
  Zoom Slots Vertical - slotzoom-vertical
  Fade - fade
  Random Flat - random-static
  Random Flat and Premium - random
  
  
  Premium Transitions: 
  
  Curtain from Left - curtain-1
  Curtain from Right - curtain-2
  Curtain from Middle - curtain-3
  3D Curtain Horizontal - 3dcurtain-horizontal
  3D Curtain Vertical - 3dcurtain-vertical
  Cube Vertical - cube
  Cube Horizontal - cube-horizontal
  In Cube Vertical - incube
  In Cube Horizontal - incube-horizontal
  TurnOff Horizontal - turnoff
  TurnOff Vertical - turnoff-vertical
  Paper Cut - papercut
  Fly In - flyin
  Random Premium - random-premium
  想了解更多提供全方位的互联网品牌行销解决方案相关内容，尽在欧博。
  
  
• data-randomtransition 
  
  "on" / "off" - This will allow a Random transitions of the Selected Transitions you choosed in the data-transitions. Dont use together with random premium and random flat transitions !  
• data-slotamount 
  
  The number of slots or boxes the slide is divided into. If you use boxfade, over 7 slots can be juggy.
   
• data-masterspeed
  
  The speed of the transition in "ms".  default value is 300 (0.3 sec)
   
• data-delay 
  
  A new Dealy value for the Slide. If no delay defined per slide, the dealy defined via Options will be used
   

Links (Full Slide Links)

• data-link
  
  A link on the whole slide pic
   
• data-target
  
  The target of the Link for the whole slide pic. (i.e. "_blank", "_self")
   
• data-slideindex
  
  Possible values:  next,back, 1-x (where x is the max. Amount of slide) If this value is set, click on slide will call the next / previous, or  n th Slide.
   

Thumbnail

• data-thumb
  
  An Alternative Source for thumbs. If not defined a copy of the background image will be used in resized form

Title

• data-title
  
  In Navigation Style Preview1- preview4 mode you can show the Title of the Slides also. Due this option you can define for each slide its own Title

The Main Image

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.

Simple Image

<img src="images/slides/slide13.jpg" >

Colored Background Instead of Image

<img src="images/slides/transparent.png" style="background-color:#56e34a" >

Lazy Loaded Image

<img src="images/slides/dummy.webp" 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">

Image Attributes

• Lazy Loading
  src="images/slides/dummy.webp" (or any other dummy small image to decrease the loading time of Document) data-lazyload="path/filename" Here you need to declare the Path and File name of the image you wish to laod as Main Image in Slide  
  
  
• Background Repeat
  data-bgrepeat:no-repeat / repeat / repeat-x / repeat-y (the way the image is shown in the slide main container)  
  
  
• Background Fit
  data-bgfit:cover / contain / normal / width(%) height(%) (select one to decide how the image should fit in the Slide Main Container).
  For Ken Burn use only a Number, which is the % Zoom at start. 100 will fit with Width or height automatically, 200 will be double sized etc..  
  
  
• Background Fit End
  data-bgfitend: Use only a Number . i.e. 300 will be a 300% Zoomed image where the basic 100% is fitting with width or height.  
  
  
• Background Position
  data-bgposition:left top / left center / left bottom / center top / center center / center bottom / right top / right center / right bottom  
  
  
• Background Position End
  data-bgpositionend:left top / left center / left bottom / center top / center center / center bottom / right top / right center / right bottom For Ken Burns Animation. This is where the IMG will be animatied  
  
  
• Ken Burns Effect
  data-kenburns:on/off to turn on Ken Burns Effect or keep it disabled.  
  
  
• Duration for Ken Burns
  data-duration:the value in ms how long the animation of ken burns effect should go. i.e. 3000 will make a 3s zoom and movement.  
  
  
• Easing of Ken Burns Effect
  data-ease:Same values as by Caption Easings available. The Movement Easing.  
  
  

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 "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-splitin
  
  Split Text Animation (incoming transition) to "words", "chars" or "lines". This will create amazing Animation Effects on one go, without the needs to create more captions.
   
• data-elementdelay
  
  A Value between 0 and 1 like 0.1 to make delays between the Splitted Text Element (start) Animations. Higher the amount of words or chars, you should decrease that number!
   
• data-splitout
  
  Split Text Animation (outgoing transition) to "words", "chars" or "lines". Only available if data-end is set !
   
• data-endelementdelay
  
  A Value between 0 and 1 like 0.1 to make delays between the Splitted Text Element (end) Animations. Higher the amount of words or chars, you should decrease that number!
   
• 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:
  
  
  New Easings:Linear.easeNone Power0.easeIn (linear), Power0.easeInOut (linear), Power0.easeOut (linear), Power1.easeIn, Power1.easeInOut, Power1.easeOut, Power2.easeIn, Power2.easeInOut, Power2.easeOut, Power3.easeIn, Power3.easeInOut, Power3.easeOut, Power4.easeIn, Power4.easeInOut, Power4.easeOut, Quad.easeIn (same as Power1.easeIn), Quad.easeInOut (same as Power1.easeInOut), Quad.easeOut (same as Power1.easeOut), Cubic.easeIn (same as Power2.easeIn), Cubic.easeInOut (same as Power2.easeInOut), Cubic.easeOut (same as Power2.easeOut), Quart.easeIn (same as Power3.easeIn), Quart.easeInOut (same as Power3.easeInOut), Quart.easeOut (same as Power3.easeOut), Quint.easeIn (same as Power4.easeIn), Quint.easeInOut (same as Power4.easeInOut), Quint.easeOut (same as Power4.easeOut), Strong.easeIn (same as Power4.easeIn), Strong.easeInOut (same as Power4.easeInOut), Strong.easeOut (same as Power4.easeOut), Back.easeIn, Back.easeInOut, Back.easeOut, Bounce.easeIn, Bounce.easeInOut, Bounce.easeOut, Circ.easeIn, Circ.easeInOut, Circ.easeOut, Elastic.easeIn, Elastic.easeInOut, Elastic.easeOut, Expo.easeIn, Expo.easeInOut, Expo.easeOut, Sine.easeIn, Sine.easeInOut, Sine.easeOut, SlowMo.ease
  
  
  Old Easings: 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! 欧博专注欧博官网，为用户提供专业可靠的体验。 
  Possible Values are:
  
  
  New Easings:围绕深度挖掘并包装品牌核心价值，欧博持续打磨更优质的服务。
  
  
  Old Easings: 欧博深耕提供全方位的互联网品牌行销解决方案领域，用心服务每一位用户。
  在实时追踪电竞赛事数据，助力品牌发声方面，欧博提供贴心周到的支持。
  欧博以打造顶级品牌网站，提升用户体验为核心，带来高效便捷的体验。
  想了解更多欧博官网相关内容，尽在欧博。
  欧博围绕深度挖掘并包装品牌核心价值不断创新，回应用户的真实需求。
  欧博围绕深度挖掘并包装品牌核心价值不断创新，回应用户的真实需求。
   

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)
   
• scrolloffset
  
  value from -200 till 200. The Offset Value of the Scroll Position
   
• 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 
   

Loop Animations Within the Layers

To Define Loop animations, everything which comes inside the Layer need to be wrapped with a div container where you can set the different Loop Animation Details

• rs-wave
  
  

  <div class="rs-wave"  data-speed="2" data-angle="0" data-radius="20" data-origin="50% 50%">
    <img src="images/dummy.webp" alt="" data-lazyload="images/newwave1.png">
  </div>
  			

  
   
• rs-pulse
  
  

  <div class="rs-pulse"  data-easing="Power4.easeInOut" data-speed="2" data-zoomstart="1" data-zoomend="0.95">
    <img src="images/dummy.webp" alt="" data-lazyload="images/cloud1.png">
   </div>
  			

  
   
• rs-pendulum
  
  

  <div class=" rs-pendulum"  data-easing="Power1.easeInOut" data-startdeg="-6" data-enddeg="6" data-speed="2" data-origin="50% 75%">
    <img src="images/dummy.webp" alt="" data-lazyload="images/cloud1.png">
   </div>
  			

  
   
• rs-slideloop
  
  

  <div class=" rs-slideloop" data-easing="Power3.easeInOut" data-speed="0.5" data-xs="-5" data-xe="5" data-ys="0" data-ye="0">
    <img src="images/dummy.webp" alt="" data-lazyload="images/cloud1.png">
   </div>
  			

  
   
• rs-rotate
  
  

  <div class=" rs-rotate"  data-easing="Power1.easeInOut" data-startdeg="-6" data-enddeg="6" data-speed="2" data-origin="50% 75%">
    <img src="images/dummy.webp" alt="" data-lazyload="images/cloud1.png">
   </div>
  			

  
   

You can add now Static Layers to your Slider. Static Layers are defiend outside the Layers (since they are independent of any other elements and slides).

You will need to define the Start and End Slide and as always the start and end time where the Layer becomes visible, or hides again.

Add your Static Layers into the static layer wrapper under the <ul> tag within the Slider !

<ul>
...your slides and layers...
</ul>

<div class="tp-static-layers">
	<!-- LAYER NR. 1 -->
	<div class="tp-caption customin customout tp-static-layer"
		data-x="center" data-hoffset="100"
		data-y="bottom" data-voffset="0"
		data-customin="x:50;y:150;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.5;scaleY:0.5;skewX:0;skewY:0;opacity:0;transformPerspective:0;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="800"
		data-start="700"
		data-startslide="1"
		data-endslide="4"
		data-end="1800"
		data-easing="Power4.easeOut"
		data-endspeed="500"
		data-endeasing="Power4.easeIn"
		style="z-index: 3"><div class="rs-wave" data-angle="90" data-distance="40" data-radius="40" data-speed="2"><img src="images/woman.png" alt=""></div>
	</div>
</div>
	  

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:

• autoplay
  
  Possible Values: "true" / "false" - will play the Video Directly when slider has been loaded 
   
• autoplayonlyfirsttime
  
  Possible Values: "true" / "false" after first Autplay the video will not be played automatically  
• nextslideatend
  
  Possible Values: "true" / "false" after video come to the end position, it swaps to the next slide automatically.
   
• videoposter
  
  the full path to an image which will be shown as Thumbnail for the Video. (only if autoplay set to false, or autoplayonlyfirsttime set to true)
   
• forcecover
  
  used only at HTML5 Videos. In case it is selected, the Videos will be resized to cover the full Slider size.
   
• forcerewind
  
  Every time the Slide is shown, the Video will rewind to the start.
   
• volume
  
  If value set to "mute", video will be played muted.
   
• videowidth
  
  Width of Video (i.e. 500 for 500px, or 100% for 100%
   
• videoheight
  
  精选提供全方位的互联网品牌行销解决方案内容，欧博与你一同发现更多精彩。
   
• aspectratio
  
  "16:9" or "4:3"
   
• videopreload
  
  Which content of Video should be preloaded. "none", "meta", "auto"
   
• videomp4
  
  The MP4 Source for the HTML5 Video
   
• videowebm
  
  The WEBM Source for the HTML5 Video
   
• videoogv
  
  The OGV Source for the HTML5 Video
   
• ytid
  
  The YouTube ID of the Video
   
• vimeoid
  
  The Vimeo ID of the Video
   
• videocontrols
  
  Show/Hide the controls of the Video. "none", "controls"
   
• videoattributes
  
  Further Video Attributes for not listed Options and Settings of Video. Used for YouTube and Vimeo like "enablejsapi=1&html5=1&hd=1&wmode=opaque&showinfo=0&rel=0"
   
• videoloop
  
  Loop HTML5 Videos - "none", "loop", "loopandnoslidestop" loop and no slide stop will loop the video, but as soon the video Timer reached the endpoint, next slide will be started.
   

YouTube Video via iFrame

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>

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

YouTube Video via Options

Boxed version

YouTube Video will be added via Options. The Following example shows an embeded YouTube Video which is loaded only on Demand. in a caption (460px X 259px), i.e.:

<div class="tp-caption sfl fadeout tp-videolayer"
		data-x="center" data-hoffset="134"
		data-y="center" data-voffset="-6"
		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"
		style="z-index: 8"
		data-ytid="T8--OggjJKQ"
		data-videoattributes="enablejsapi=1&html5=1&hd=1&wmode=opaque&showinfo=0&rel=0"
		data-videocontrols="controls"
		data-videowidth="640"
		data-videoheight="360">
</div>

 <div class="tp-caption sfl fadeout fulllscreenvideo tp-videolayer"
		data-x="0"
		data-y="0"
		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"
		style="z-index: 8"
		data-ytid="T8--OggjJKQ"
		data-videoattributes="enablejsapi=1&html5=1&hd=1&wmode=opaque&showinfo=0&rel=0"
		data-videocontrols="controls"
		data-videowidth="100%"
		data-videoheight="100%">
</div>

Vimeo Video via iFrame

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

Vimeo Video via Options

Vimeo Video API works only Online. It will not work well on Localhost due some Sandbox Security reason. Please always test it Online. Vimeo Video will be added via Options. The Following example shows an embeded Vimeo Video which is loaded only on Demand in a Layer (460px X 259px), i.e.:

Boxed version

<div class="tp-caption sfl fadeout tp-videolayer"
		data-x="center" data-hoffset="134"
		data-y="center" data-voffset="-6"
		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"
		style="z-index: 8"
		data-vimeoid="29298709"
		data-videoattributes="enablejsapi=1&html5=1&hd=1&wmode=opaque&showinfo=0&rel=0"
		data-videocontrols="controls"
		data-videowidth="640"
		data-videoheight="360">
</div>

 <div class="tp-caption sfl fadeout 欧博以提供全方位的互联网品牌行销解决方案为核心，带来高效便捷的体验。"
		data-x="0"
		data-y="0"
		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"
		style="z-index: 8"
		data-vimeoid="29298709"
		data-videoattributes="enablejsapi=1&html5=1&hd=1&wmode=opaque&showinfo=0&rel=0"
		data-videocontrols="controls"
		data-videowidth="100%"
		data-videoheight="100%">
</div>

<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="" controls preload="none" width="600" height="240"
  poster="http://video-js.zencoder.com/oceans-clip.png" >

   <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="" controls preload="none" width="100%" height="100%"
     poster="http://video-js.zencoder.com/oceans-clip.png" >

   <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="tp-caption sfl fadeout tp-videolayer"
		data-x="center" data-hoffset="134"
		data-y="center" data-voffset="-6"
		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-videowidth="640"
		data-videoheight="320"
		data-videopreload="meta"
		data-videomp4="http://themepunch.com/revolution/wp-content/uploads/2014/05/among_the_stars.mp4"
		data-videowebm="http://themepunch.com/revolution/wp-content/uploads/2014/05/among_the_stars.webm"
		data-videocontrols="none"
		data-forcecover="0"
		data-forcerewind="off"
		data-aspectratio="16:9"
		data-volume="mute"
		data-videoposter="http://themepunch.com/revolution/wp-content/uploads/2014/05/video_space_cover.jpg"
>
</div>

 <div class="tp-caption sfl fadeout 精选欧博官网内容，欧博与你一同发现更多精彩。"
		data-x="0"
		data-y="0"
		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-videowidth="100%"
		data-videoheight="100%"
		data-videopreload="meta"
		data-videomp4="http://themepunch.com/revolution/wp-content/uploads/2014/05/among_the_stars.mp4"
		data-videowebm="http://themepunch.com/revolution/wp-content/uploads/2014/05/among_the_stars.webm"
		data-videocontrols="none"
		data-forcecover="1"
		data-forcerewind="on"
		data-aspectratio="16:9"
		data-volume="mute"
		data-videoposter="http://themepunch.com/revolution/wp-content/uploads/2014/05/video_space_cover.jpg">
</div>

横幅计时器

Top Positioned Banner Timer:

<div class="tp-bannertimer"></div> 

Bottom Positioned Banner Timer:

<div class="tp-bannertimer tp-bottom"></div>

To Hide the Banner Timer:

In case you wish to show a single image instead of the Slider on Slower Browsers / mobiles, please simple use the aimg and aie8, amobile data attributes as shown here

<div class="tp-banner" data-aimg="../examples&source/images/slidebg1.jpg" data-aie8="enabled" data-amobile="enabled">...

Auto-Responsive Layout

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

<div class="fullscreen-container">
    <div class="fullscreenbanner">
    </div>
</div>

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

• 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
• api.revscroll()  - Scrollt Body under the Slide in FullScreen mode

• revolution.slide.onchange - Event is triggered when Slide has been rotated. data value will give you the current slide. i.e. 
  
  
  api.bind("revolution.slide.onchange",function (e,data) {
       jQuery('#callbackinfo').html('Last Event: Slide Changed to '+data.slideIndex);
  });
   
• 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
• revolution.slide.onbeforeswap - - Event is triggered when slider is going to change to next slide
• revolution.slide.onafterswap - - Event is triggered when slider has finnishded the change of the transition (full transition finnished)
• revolution.slide.onloaded - - Event is triggered when slider is loaded and it is prepared

Used Assets

• @license Copyright (c) 2008-2013, GreenSock. All rights reserved.
   http://greensock.com

• jQuery WaitForImages 1.4
   https://github.com/alexanderdickson/waitForImages
  Licensed under the MIT licenses.

• Template demo images licensed from Fotolia for preview usage. Please do not attempt to rip the images from the preview!

• Touch Wipe jQuery Plugin

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