CSS 使 BXslider 全屏（填充整个浏览器窗口）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26359620/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making BXslider full screen (filling entire browser window)
提问by DanielNolan
I am currently trying to implement THISvery 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!
我目前正在尝试实现这个非常简单的内容滑块。我已经达到了它可以工作的程度，但是使用下面的 CSS 代码我需要使滑块全屏显示，填充整个浏览器窗口。但是我看不到把代码放在哪里有人可以帮助我吗？问这么简单的问题，我觉得自己有点傻！
My current code is below.
我当前的代码如下。
My HTML 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>
My CSS 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;
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;
}
回答by Bojan Petkovski
Here you are a full screen bxSlider + responsive. http://jsfiddle.net/0nj2ry4n/1/
在这里你是一个全屏 bxSlider + 响应式。http://jsfiddle.net/0nj2ry4n/1/
First remove the images and make them background of the li elements.
首先删除图像并使它们成为 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>
Then add this css
然后添加这个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
并调用 bxSlider
$(document).ready(function(){
$('.bxslider').bxSlider({
pager: false
});
});
回答by panther
Trz to set width&height to slider
Trz 将宽度和高度设置为滑块
.bx-wrapper {width: 100%; height: 100%;}
/*
I don't know where exactly this element is added, so maybe try
.bxslider {width: 100%; height: 100%;}
*/
