Tworzenie pełnego ekranu przeglądarki BXslider (wypełnianie całego okna przeglądarki)

Aktualnie próbuję zaimplementować bardzo prosty suwak zawartości. Osiągnąłem punkt, w którym działa, jednak używając poniższego kodu CSS, muszę zrobić suwak na pełnym ekranie, wypełniając całe okno przeglądarki. Jednak nie mogę zobaczyć, gdzie umieścić kod dla tego może mi pomóc? Czuję się trochę manekinem zadającym takie proste pytanie!Tworzenie pełnego ekranu przeglądarki BXslider (wypełnianie całego okna przeglądarki)

Mój obecny kod znajduje się poniżej.

Mój kod 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>

Mój kod 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; 
}

Źródło

2014-10-14 DanielNolan

Tutaj jesteś pełnoekranowym bxSlider + responsywnym. http://jsfiddle.net/0nj2ry4n/1/

Najpierw usuń obrazy i przekształć je w tło elementów 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>

Następnie dodać to 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; 
}

I zadzwonić bxSlider

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

Źródło

2014-10-14 11:53:06

czy mogę dodać css tutaj do m y istniejące css lub zamiast? – DanielNolan

Po prostu dodaj :) I usuń obrazy i przekształć je w tło-obrazy do elementów li :) A jeśli chcesz mieć pager na suwaku, musisz dostosować jego pozycję :) –

dzięki @bojan Petkovski ale wciąż jestem mając kłopot, nie działa, przesłałem twój kod na www.mildenhire.com/other/other.html. Czy możesz rzucić okiem i powiedzieć mi, co jest z nim nie tak? – DanielNolan

TRZ ustawić szerokość & wysokość do 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%;} 
*/

Źródło

2014-10-14 11:27:57 panther

Ive miał ten sam problem, ale bez pracy nie zrobił :(. – DanielNolan

Proszę dodać link do strony gdzie można stosować bx suwak, to może pomóc – panther

Witam Właśnie wysłałem go do http://www.mildenhire.com/other/other.html dzięki za pomoc @panther – DanielNolan

Tworzenie pełnego ekranu przeglądarki BXslider (wypełnianie całego okna przeglądarki)

Odpowiedz

Powiązane problemy