如需支援，請查看 http://themepunch.com !
本章將提供您有關如何安裝滑塊及設定選項的一般說明。後續章節將視需要提供更詳細的內容。
請上傳 rs-plugin 資料夾到您的伺服器。在此資料夾中，您將找到包含所有項目內容的以下子資料夾：
您可以使用自己的 jQuery，但我們建議直接從 Google 資源載入（請參閱本文件後續內容）。
您會在您下載的壓縮檔中的 examples 資料夾下找到許多 examples&sources 範例。
將以下幾行加入您的 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.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>（投影片）可以包含無限數量的標題。標題是簡單的 HTML 標記，包含 iframe、圖片、標題、段落和任何其他標籤。每個標題必須包裹在 <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 影片（460px X 259px），例如：
<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>
您可能需要使用 origin=http://yourdomain 或 origin=https://yourdomain 來處理 YT API 問題！
<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> 您可能需要使用 origin=http://yourdomain 或 origin=https://yourdomain 來處理 YT 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 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>
想了解更多覆盖全球顶级足球、篮球赛事直播相关内容，尽在捷报比分。
<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>
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 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>
如果您希望在較慢的瀏覽器/行動裝置上顯示單張圖片而非滑塊，請使用此處所示的 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(
.... 使用的資源
如果您在安裝或自訂我們的產品時遇到問題，請隨時透過我們的支援工單系統與我們聯繫：