web-dev-qa-db-fra.com

Faire BXslider en plein écran (remplir toute la fenêtre du navigateur)

J'essaie actuellement d'implémenter CE curseur de contenu très simple. J'ai atteint un point où cela fonctionne, mais en utilisant le code CSS ci-dessous, je dois faire le curseur en plein écran, remplissant toute la fenêtre du navigateur. Cependant, je ne vois pas où mettre le code car cela peut-il m'aider? Je me sens un peu idiot pour avoir posé une question aussi simple!

Mon code actuel est ci-dessous.

Mon code 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>

Mon code 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;
}
cssbxslider
9
DanielNolan

Vous êtes ici un plein écran bxSlider + responsive. http://jsfiddle.net/0nj2ry4n/1/

Retirez d'abord les images et faites-en l'arrière-plan des éléments 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>

Ensuite, ajoutez ce 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;
}

Et appelez bxSlider

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

Trz pour régler la largeur et la hauteur du curseur

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