如需支持，请查看 http://themepunch.com !
本章将为您提供有关如何安装滑块和设置选项的通用说明。如有需要，后续章节将提供更详细的内容。
请上传 rs-plugin 文件夹到您的服务器。在此文件夹中，您将找到以下包含所有项目内容的子文件夹：
您可以使用自己的 jQuery，但我们建议直接从 Google 资源加载（详见本文档后续部分）。
您会在下载的压缩包中的 examples 文件夹下找到许多 examples&sources 示例。
将以下代码行添加到您的 HTML 头部：
<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.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>
此样式允许您让包裹容器决定滑块的宽度。高度将根据滑块宽度自动计算。
将其放入您的 CSS 文件中（例如）：
.bannercontainer {
width:100%;
position:relative;
padding:0;
}
.banner{
width:100%;
position:relative;
}
此样式允许横幅始终适应最大屏幕尺寸。在某些选项中，您可以选择容器，这些容器将根据容器高度减少横幅高度。请参见示例。
它要求：
将其放入您的 CSS 文件
.bannercontainer {
width:100%;
position:relative;
padding:0;
} 在横幅容器内创建一个无序列表，其中每个 <li> 元素对应一个幻灯片。
<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>
每个幻灯片（<li> </li>） 必须 必须包含一个主图像，该图像作为简单的 <img> 标签添加到第一级。它可以是简单图像、彩色或透明图像，或作为延迟加载版本的虚拟图像。
<img src="images/slides/slide13.jpg" >
<img src="images/slides/transparent.png" style="background-color:#56e34a" >
<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">
每个 <li>（幻灯片）可以包含无限数量的标题。标题是带有 iframe、图像、标题、段落和任何其他标签的简单 HTML 标记。每个标题必须通过 <div class="caption"></div> 包裹。
每个标题都有一些特殊的类和 data- 属性，用于设置动画类型、位置、速度、缓动等。
要定义循环动画，图层内的所有内容都需要包裹在一个div容器中，您可以在其中设置不同的循环动画细节
<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>
<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>
<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>
<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>
<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>
您现在可以向滑块添加静态图层。静态图层在图层外部定义（因为它们独立于任何其他元素和幻灯片）。
您需要定义起始和结束幻灯片，以及图层可见或隐藏的起始和结束时间。
<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>
滑块可以播放Vimeo、YouTube和HTML5（videoJs）视频，支持盒状和“全幻灯片”尺寸。通过嵌入式API，滑块将暂停并从视频播放器重新启动。要在滑块中使用视频文件，请参阅以下说明。
每个视频文件都有相同的 data- 选项，例如：
盒状版本
YouTube视频将通过iframe添加到标题中。以下示例显示了一个在标题中嵌入的iFrame YouTube视频（460像素X 259像素），例如：
<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>
您可能需要使用origina=http://yourdomain或origin=https://yourdomain以解决YT API问题！
<div class="caption fade 全屏视频"
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> 您可能需要使用 origin=http://yourdomain 或 origin=https://yourdomain 来解决 YouTube API 问题！
盒状版本
YouTube 视频将通过选项添加。以下示例展示了一个按需加载的嵌入式 YouTube 视频，尺寸为 460px X 259px，并带有说明文字：
<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 全屏视频 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>
杏彩体育深耕涵盖足球、篮球等热门体育赛事，信息全面及时。领域，用心服务每一位用户。
<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 全屏视频"
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>
Vimeo 视频 API 仅在线工作。由于沙盒安全原因，在本地主机上无法正常运行。请始终在线测试。 Vimeo 视频将通过选项添加。以下示例展示了一个按需加载的嵌入式 Vimeo 视频，位于图层中（460px X 259px），例如：
盒状版本
<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>
HTML5 文件仅在存在 html5 视频标记时才会加载。
盒装版本（示例）
<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 全屏视频"
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 精选杏彩体育APP内容，杏彩体育与你一同发现更多精彩。" 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>
如果您希望在较慢的浏览器/移动设备上显示单张图片而非滑块，请按此处所示使用 aimg、aie8 和 amobile 数据属性。
<div class="tp-banner" data-aimg="../examples&source/images/slidebg1.jpg" data-aie8="enabled" data-amobile="enabled">...
响应式意味着滑块将适应各种屏幕宽度。外部容器大小将定义滑块的最大宽度。高度将自动计算。
.bannercontainer {
width:100%;
position:relative;
padding:0;
}
.banner{
width:100%;
position:relative;
}
您也可以在全屏模式下使用滑块。它需要能够使用屏幕的全宽，即不要将其包裹在任何盒状容器中。对于全屏，只需使用以下标记和样式：
标记可能如下所示：
<div class="fullscreen-container">
<div class="fullscreenbanner">
</div>
</div> 样式只需设置 100% 的宽度和高度。
.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(
.... 使用的资源
如果您在安装或定制我们的产品时遇到问题，请随时通过我们的支持工单系统联系我们：