嗨我正在使用皇家滑块，我试图让它全屏。导航箭头似乎正常工作，但没有别的。我希望它像这个网站一样运行（点击任何缩略图以查看滑块）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;
}
答案 0 :(得分：2)
为什么不问剧本作者。 “自动缩放”滑块选项可根据宽度进行高度缩放，如果需要全屏，则需要将其禁用。
.royalSlider {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
height: auto;
width: auto;
}
答案 1 :(得分：1)
在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,
答案 2 :(得分：1)
我注意到了你的问题，因为我从这里看到了交通问题。我的整个WordPress主题实际上是在Github上公开的，所以你可以看看我的代码。这是链接：https://github.com/Ahrengot/Ahrengot-WP-Theme
这里是图库使用的JS文件的链接：https://github.com/Ahrengot/Ahrengot-WP-Theme/blob/master/library/js/work-gallery.js
希望这会有所帮助：）