使BXslider全屏（填充整个浏览器窗口） [英] Making BXslider full screen (filling entire browser window)

问题描述

我目前正尝试实施 THIS 非常简单的内容滑块。我已经达到一个点，它是工作，但使用CSS代码下面我需要使滑块全屏，填充整个浏览器窗口。但是我看不到放在哪里的代码这可以帮助我吗？

我现在的代码如下。

我的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> 
  
 
 
 
 我的CSS代码  
 
 
  .bx-wrapper {
 position：relative; 
 left：0px; 
 top：0px; 
 padding：0; 
 * zoom：1; 
} 
 
 .bx-wrapper img {
 max-width：100％; 
 height：100％; 
 display：block; 
} 
 
 / **主题：
 ============================= ====== * / 
 
 .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; 
 
 / *修复页面上的其他元素移动（在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 {
背景：＃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 ： 中央; 
} 
 
 .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 * / 
 
 .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; 
} 
 
 / *图片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; 
} 
  
 
 
解决方案
 bxSlider +响应。  http://jsfiddle.net/0nj2ry4n/1/  
 
 
 
首先删除图像，并使他们的李元素的背景。 
 < 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> 
  
然后添加此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; 
} 
  
并调用bxSlider 
  $（document）.ready（function（）{
 $（'。bxslider'）。bxSlider（{
 pager：false 
}） ; 
}）; 
  
 
I am currently trying to implement THIS very simple content slider. I have reached a point where it is working, however using the CSS code below I need to make the slider full screen, filling the entire browser window. However I can not see where to put the code for this can someody help me? I feel like a bit of a dummy for asking such a simple question!

My current code is below.

My HTML code
<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>
My CSS code
.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;
}

解决方案
Here you are a full screen bxSlider + responsive. http://jsfiddle.net/0nj2ry4n/1/ 

First remove the images and make them background of the li elements. 
<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>
Then add this 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;
}
And call bxSlider
$(document).ready(function(){
    $('.bxslider').bxSlider({
        pager: false
    });
});


                        
这篇关于使BXslider全屏（填充整个浏览器窗口）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！