製作皇家滑塊全屏

Question

嗨，我正在使用皇家滑塊，並試圖使其全屏。導航箭頭似乎正常工作，但沒有別的。我希望它的功能像這個網站（點擊任何縮略圖來查看滑塊）http://ahrengot.com/work/skive-festival-website/這是我無法複製的頁面http://klossal.com/js/royalslider/demo/test.html

任何幫助，我可以得到這將是偉大的，這幾乎是我的網站所需要的最後一個功能，而且我現在只用了一段時間就失敗了，謝謝。

HTML：

<div id="content-slider" class="royalSlider iskin">     
<ul class="royalSlidesContainer">  
    <li class="royalSlide"> 
     <div style="border:1px solid red;height:100%;"> 
      <img src="img/contentSliderAssets/4.jpg" width="285" height="200"/> 
      <div style="border:1px solid red;"> 
       <h4>Content Slider</h4> 
       <p>You can place HTML content on each slide, touch navigation still 
works. Also you can disable mouse navigation completely or just for specific elements: 
</p> 
       <a class="learnMore non-draggable" href="javascript:void()">Non- 
draggable element</a> 
       <a class="learnMore" href="javascript:void()">Draggable element</a> 
      </div> 
     </div> 
    </li> 
    <li class="royalSlide"> 
     <div > 
      <img src="img/contentSliderAssets/1.jpg" width="195" height="240"/> 
      <img src="img/contentSliderAssets/2.jpg" width="178" height="240"/> 
      <img src="img/contentSliderAssets/3.jpg" width="197" height="240"/> 
     </div> 
    </li> 
    <li class="royalSlide"> 
     <div>    
      <div style="text-align:center; width: 660px; margin: 100px auto 0;">      
       <p>Slider is tested on iPad, iPad 2, iPhone 4, HTC Desire and 
Blackberry PlayBook.<br/> If you've found that something works incorrect on your 
device, so please contact me using contact form on my <a 
href="http://goo.gl/H9VAg">profile page</a> and I'll try to fix it asap.</p> 
      </div> 
     </div>  
    </li>   
</ul> 
</div> 

CSS：

/** 
* Slides area (set background here) 
*/ 

.royalSlider .royalWrapper { 
overflow:hidden;  
position:relative; 

width:100%; 
height:100%; 
} 
.royalSlider .royalSlide, 
.royalSlider .royalWrapper { 
/* Bakground behind slides */ 
background: #111111; 
} 
/* slides holder, grabbing container */ 
.royalSlider .royalSlidesContainer { 
position: relative; 
left: 0; 
top: 0 !important; 
list-style:none !important; 
margin:0 !important; 
padding:0 !important; 
border: 0 !important; 
} 


/* slide item */ 
.royalSlider .royalSlide { 
padding: 0 !important; 
margin: 0 !important; 
border: 0 !important; 
list-style: none !important; 

position:relative; 
float:left; 

overflow:hidden;  
} 

/* 

Direction Navigation (arrows) 

*/ 
.royalSlider .arrow 
{ 
/*background:url(../img/controlsSprite.png) no-repeat 0 0;*/ 
background-color: #C00; 
background-repeat: no-repeat; 
background-position: 0 0; 

/* change arrows size here */ 
width: 45px; 
height: 90px; 

top:50%; 
margin-top:-45px; 

cursor: pointer; 
display: block; 
position: absolute;  

z-index:25; 

} 
.royalSlider .arrow:hover { 

} 
.royalSlider .arrow.disabled { 

} 
/* left arrow */ 
.royalSlider .arrow.left { 
background-position: top left; 
left: 0;  
} 
/* right arrow */ 
.royalSlider .arrow.right { 
background-position: top right; 
right: 0; 
} 




/* Control navigation container (bullets or thumbs) */ 
.royalSlider .royalControlNavOverflow { 
width:100%; 
overflow:hidden; 
position:absolute; 
margin-top:-20px; 
z-index:25; 
} 
/* This container is inside ".royalControlNavContainer" 
and is used for auto horizontal centering */ 
.royalSlider .royalControlNavCenterer { 
float: left; 
position: relative; 
left: -50%; 
} 
/* Control navigation container*/ 
.royalSlider .royalControlNavContainer { 
float: left; 
position: relative; 
left: 50%; 
} 


/* Scrollable thumbnails containers */ 
.royalSlider .royalControlNavThumbsContainer {  
left:0; 
position:relative; 
} 
.royalSlider .thumbsAndArrowsContainer { 
overflow:hidden; 
width: 100%; 
position: relative; 
} 
.royalSlider .royalControlNavOverflow.royalThumbs { 
width: auto; 
position: relative; 
overflow: hidden; 
margin-top:4px; 
} 






/* 

Control navigation (bullets, thumbnails) 

*/ 
.royalSlider .royalControlNavOverflow a{  
background:#0C0 none no-repeat scroll 0 0; 

width:20px; 
height:20px;  

float:left; 
cursor:pointer; 

position:relative; 
display:block; 

text-indent: -9999px; 
} 
/* Current control navigation item */ 
.royalSlider .royalControlNavOverflow a.current { 
background-color: #C00; 
} 
/* Hover state navigation item */ 
.royalSlider .royalControlNavOverflow a:hover { 
background-color: #00C; 
} 

/* Thumbnails */ 
.royalSlider .royalControlNavOverflow a.royalThumb{ 
/*background: none no-repeat 0 0;*/ 
/*background-color: ;*/ 
width:144px; 
height:60px;  
/* thumbnails spacing, use margin-right only */ 
margin-right:4px; 

} 
.royalSlider .royalControlNavOverflow a.royalThumb.current {  
background-position: -3px -3px !important; 
border:3px solid #C00 !important; 
width:138px; 
height:54px; 
} 
.royalSlider .royalControlNavOverflow a.royalThumb:hover { 
background-position: -3px -3px; 
border:3px solid #00C; 
width:138px; 
height:54px; 
} 



/* 

Thumbnails navigation arrows 

*/ 
.royalSlider .thumbsArrow { 
width: 38px; 
height: 68px; 

cursor: pointer; 
display: block; 
position: relative;  
z-index: 25; 

background: #C99; 

} 
.royalSlider .thumbsArrow.left {  
float: left; 
} 
.royalSlider .thumbsArrow.right { 
float: right; 
} 
.royalSlider .thumbsArrow:hover { 

} 
.royalSlider .thumbsArrow.disabled { 

} 






/* Captions container */ 
.royalSlider .royalCaption { 
z-index:20; 
display:block; 
position:absolute; 
left:0; 
top:0; 
/*font: normal normal normal 1em/1.5em Georgia, serif; 
color:#FFF;  */ 
} 
/* Caption item */ 
.royalSlider .royalCaptionItem { 
position:absolute; 
left:0; 
top:0; 
margin: 0; 
padding: 0; 
} 



/* Loading (welcome) screen */ 
.royalSlider .royalLoadingScreen { 
background:#FFF; 
width:100%; 
height:100%; 
position:absolute; 
z-index:99; 
} 
/* Loading screen text ("Loading...") */ 
.royalSlider .royalLoadingScreen p {   
width:100%; 
position:absolute; 
margin:0 auto; 
top: 45%; 
text-align:center; 
} 

/* single slide image preloader */ 
.royalSlider .royalPreloader { 
position:absolute; 
width:24px; 
height:24px; 
left:50%; 
top:50%; 
margin-left:-12px; 
margin-top:-12px; 
z-index:0; 
background-image:url(../img/preloader.gif); 
} 

.royalSlider .grab-cursor{cursor:move;} 
.royalSlider .grab-cursor{cursor:url("../img/cursors/grab.png") 8 8,-moz-grab;} 
.royalSlider .grab-cursor{*cursor:url(../img/cursors/grab.cur);} 
.royalSlider .grab-cursor{cursor:move\0/;} /* ie8 hack */ 

.royalSlider .grabbing-cursor{cursor:move;} 
.royalSlider .grabbing-cursor{cursor:url("../img/cursors/grabbing.png") 8 8,-moz- 
grabbing;} 
.royalSlider .grabbing-cursor{*cursor:url(../img/cursors/grabbing.cur);} 


/* Cursor used if mouse dragging is disabled */ 
.royalSlider .auto-cursor{cursor:auto;} 

.royalSlider .royalHtmlContent { 
position: absolute; 
top: 0; 
left: 0; 
} 
.royalSlider .non-draggable { 
cursor: auto; 
} 
.royalSlider .fade-container .royalSlide{ 
position: absolute; 
left: 0; 
top: 0; 
list-style-type: none; 
margin: 0; 
padding: 0; 
z-index: 10; 
} 
.royalSlider .royalImage { 
max-width:none; 
margin:0; 
padding: 0 !important; 
border: 0 !important; 
} 

Answer 1

爲什麼不問腳本作者。自動縮放滑塊選項可以根據寬度進行高度縮放，如果需要全屏，則需要將其禁用。

.royalSlider { 
position: absolute; 
left: 0; 
top: 0; 
bottom: 0; 
right: 0; 
height: auto; 
width: auto; 
} 

Answer 2

在Royalslider的腳本文件，你可以通過設置以下值對其進行管理：

 autoScaleSlider: true, // Overrides css slider size settings. Sets slider height based on base width and height. Don't forget to set slider width to 100%. 
    autoScaleSliderWidth: 0, // Base slider width 
    autoScaleSliderHeight: 0, 

Answer 3

我注意到你的問題，因爲我看到交通從我這裏來到我的投資組合。我的整個WordPress主題實際上都是在Github上公開的，所以你可以直接看看我的代碼。這裏的鏈接：https://github.com/Ahrengot/Ahrengot-WP-Theme

，這裏是由畫廊使用的JS文件的鏈接：https://github.com/Ahrengot/Ahrengot-WP-Theme/blob/master/library/js/work-gallery.js

希望這有助於:)