Rendere BXslider a schermo intero (riempiendo l'intera finestra del browser)

Attualmente sto cercando di implementare il dispositivo di scorrimento dei contenuti molto semplice THIS. Ho raggiunto un punto in cui funziona, tuttavia utilizzando il codice CSS di seguito ho bisogno di rendere il cursore a schermo intero, riempiendo l'intera finestra del browser. Tuttavia non riesco a vedere dove mettere il codice per questo, qualcuno può aiutarmi? Mi sento un po 'stupido per aver fatto una domanda così semplice!Rendere BXslider a schermo intero (riempiendo l'intera finestra del browser)

Il mio codice attuale è sotto.

Il mio codice HTML

<body> 

<div class="slider"> 
<ul class="bxslider"> 
<li><img src="images/slide1.png" /></li> 
<li><img src="images/slide2.png" /></li> 
<li><img src="images/slide3.png" /></li> 
</ul></div> 

</body>

Il mio codice CSS

.bx-wrapper { 
position: relative; 
left: 0px; 
top: 0px; 
padding: 0; 
*zoom: 1; 
} 

.bx-wrapper img { 
max-width: 100%; 
height: 100%; 
display: block; 
} 

/** THEME 
===================================*/ 

.bx-wrapper .bx-viewport { 
-moz-box-shadow: 0 0 5px #ccc; 
-webkit-box-shadow: 0 0 5px #ccc; 
box-shadow: 0 0 5px #ccc; 
border: 5px solid #fff; 
left: -5px; 
background: #fff; 

/*fix other elements on the page moving (on Chrome)*/ 
-webkit-transform: translatez(0); 
-moz-transform: translatez(0); 
    -ms-transform: translatez(0); 
    -o-transform: translatez(0); 
    transform: translatez(0); 
} 

.bx-wrapper .bx-pager, 
.bx-wrapper .bx-controls-auto { 
position: absolute; 
bottom: -30px; 
width: 100%; 
} 

/* LOADER */ 

.bx-wrapper .bx-loading { 
min-height: 50px; 
background: url(images/bx_loader.gif) center center no-repeat #fff; 
height: 100%; 
width: 100%; 
position: absolute; 
top: 0; 
left: 0; 
z-index: 2000; 
} 

/* PAGER */ 

.bx-wrapper .bx-pager { 
text-align: center; 
font-size: .85em; 
font-family: Arial; 
font-weight: bold; 
color: #666; 
padding-top: 20px; 
} 

.bx-wrapper .bx-pager .bx-pager-item, 
.bx-wrapper .bx-controls-auto .bx-controls-auto-item { 
display: inline-block; 
*zoom: 1; 
*display: inline; 
} 

.bx-wrapper .bx-pager.bx-default-pager a { 
background: #666; 
text-indent: -9999px; 
display: block; 
width: 10px; 
height: 10px; 
margin: 0 5px; 
outline: 0; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
border-radius: 5px; 
} 

.bx-wrapper .bx-pager.bx-default-pager a:hover, 
.bx-wrapper .bx-pager.bx-default-pager a.active { 
background: #000; 
} 

/* DIRECTION CONTROLS (NEXT/PREV) */ 

.bx-wrapper .bx-prev { 
left: 10px; 
background: url(images/controls.png) no-repeat 0 -32px; 
} 

.bx-wrapper .bx-next { 
right: 10px; 
background: url(images/controls.png) no-repeat -43px -32px; 
} 

.bx-wrapper .bx-prev:hover { 
background-position: 0 0; 
} 

.bx-wrapper .bx-next:hover { 
background-position: -43px 0; 
} 

.bx-wrapper .bx-controls-direction a { 
position: absolute; 
top: 50%; 
margin-top: -16px; 
outline: 0; 
width: 32px; 
height: 32px; 
text-indent: -9999px; 
z-index: 9999; 
} 

.bx-wrapper .bx-controls-direction a.disabled { 
display: none; 
} 

/* AUTO CONTROLS (START/STOP) */ 

.bx-wrapper .bx-controls-auto { 
text-align: center; 
} 

.bx-wrapper .bx-controls-auto .bx-start { 
display: block; 
text-indent: -9999px; 
width: 10px; 
height: 11px; 
outline: 0; 
background: url(images/controls.png) -86px -11px no-repeat; 
margin: 0 3px; 
} 

.bx-wrapper .bx-controls-auto .bx-start:hover, 
.bx-wrapper .bx-controls-auto .bx-start.active { 
background-position: -86px 0; 
} 

.bx-wrapper .bx-controls-auto .bx-stop { 
display: block; 
text-indent: -9999px; 
width: 9px; 
height: 11px; 
outline: 0; 
background: url(images/controls.png) -86px -44px no-repeat; 
margin: 0 3px; 
} 

.bx-wrapper .bx-controls-auto .bx-stop:hover, 
.bx-wrapper .bx-controls-auto .bx-stop.active { 
background-position: -86px -33px; 
} 

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */ 

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { 
text-align: left; 
width: 80%; 
} 

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { 
right: 0; 
width: 35px; 
} 

/* IMAGE CAPTIONS */ 

.bx-wrapper .bx-caption { 
position: absolute; 
bottom: 0; 
left: 0; 
background: #666\9; 
background: rgba(80, 80, 80, 0.75); 
width: 100%; 
} 

.bx-wrapper .bx-caption span { 
color: #fff; 
font-family: Arial; 
display: block; 
font-size: .85em; 
padding: 10px; 
}

fonte

2014-10-14 DanielNolan

Qui sei a schermo intero bxSlider + reattivo. http://jsfiddle.net/0nj2ry4n/1/

Prima rimuovere le immagini e renderle sfondo degli elementi li.

<ul class="bxslider"> 
    <li style="background-image: url('http://bxslider.com/images/home_slides/hillside.jpg');"></li> 
    <li style="background-image: url('http://bxslider.com/images/home_slides/houses.jpg');"></li> 
    <li style="background-image: url('http://bxslider.com/images/home_slides/hillside.jpg');"></li> 
    <li style="background-image: url('http://bxslider.com/images/home_slides/houses.jpg');"></li> 
</ul>

Quindi aggiungere questo css

*{ 
    margin: 0px; 
    padding: 0px; 
} 
body, html{ 
    height: 100%; 
} 
.bx-viewport, .bx-wrapper{ 
    position:relative; 
    width:100%; 
    height:100% !important; 
    top:0; 
    left:0; 
} 
.bxslider, .bxslider li{ 
    height: 100% !important;; 
} 
.bxslider li{ 
    background-repeat: no-repeat; 
    background-position: top center; 
    background-size: cover; 
} 
.bx-wrapper .bx-viewport{ 
    border: none !important; 
}

E chiamare bxSlider

$(document).ready(function(){ 
    $('.bxslider').bxSlider({ 
     pager: false 
    }); 
});

fonte

2014-10-14 11:53:06

devo aggiungere il css qui a m y css esistente o invece? – DanielNolan

Basta aggiungerlo :) E rimuovere le immagini e renderle immagini di sfondo agli elementi li :) E se ti piace avere il cercapersone sul cursore è necessario regolare la posizione :) –

grazie @bojan Petkovski ma io sono ancora avendo problemi, non funziona, ho caricato il tuo codice su www.mildenhire.com/other/other.html. Potresti dare un'occhiata e dirmi cosa c'e 'che non va? – DanielNolan

Trz per impostare la larghezza & altezza per slider

.bx-wrapper {width: 100%; height: 100%;} 
/* 
    I don't know where exactly this element is added, so maybe try 
    .bxslider {width: 100%; height: 100%;} 
*/

fonte

2014-10-14 11:27:57 panther

Ive ha avuto lo stesso problema, ma nessun lavoro è non ha ancora :(. – DanielNolan

Si prega di aggiungere link al sito dove si è utilizzato BX slider, può aiutare – panther

ciao l'ho appena caricato su http://www.mildenhire.com/other/other.html grazie per il tuo aiuto @panther – DanielNolan

Rendere BXslider a schermo intero (riempiendo l'intera finestra del browser)

risposta

Problemi correlati