machen royal slider fullscreen

Hallo, ich bin mit royal Schieberegler und versuche zu machen es Vollbild. Der nav-Pfeile erscheinen, um richtig funktionieren, aber sonst nichts tut. Ich möchte es für ein Funktion wie diese Website (klicken Sie auf eines der Vorschaubilder, um zu sehen, die Schieberegler) http://ahrengot.com/work/skive-festival-website/ und das ist die Seite, ich habe Probleme replizieren, http://klossal.com/js/royalslider/demo/test.html

Jede Hilfe die ich bekommen kann mit diesem wäre toll, das ist so ziemlich das Letzte feature, das ich brauche für meine Website und ich habe gerade in Ermangelung an es für acouple Tage jetzt, danke.

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;   
}

InformationsquelleAutor loriensleafs | 2012-07-12

Schreibe einen Kommentar