2

こんにちは、ロイヤルスライダーを使用していて、フルスクリーンにしようとしています。ナビゲーション矢印は正しく機能しているように見えますが、他には何も機能していません。このサイトのように機能させたいです (サムネイルをクリックするとスライダーが表示されます) 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;   
}
4

3 に答える 3

2

スクリプトの作成者に聞いてみませんか。自動スケール スライダー オプションは、幅に基づいて高さをスケールします。フルスクリーンにしたい場合は無効にする必要があります。

.royalSlider {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
height: auto;
width: auto;
}
于 2012-07-12T15:42:22.070 に答える
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,
于 2012-07-12T12:38:01.720 に答える
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

お役に立てれば ：）

于 2012-09-20T11:52:15.090 に答える