Making BXslider full screen (filling entire browser window)

Question

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;
}

score 24 · Accepted Answer · answered Oct 14 '14 at 11:53

24

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
    });
});

answered Oct 14 '14 at 11:53

Bojan Petkovski

6,503
1
19
32

do I add the css here to my existing css or instead of? – DanielNolan Oct 14 '14 at 12:02
1

Just add it :) And remove the images and make them background-images to the li elements :) And if you like to have the pager on the slider you need to adjust it's position :) – Bojan Petkovski Oct 14 '14 at 12:04
thanks @bojan Petkovski but I am still having trouble, its not working, I have uploaded your code to www.mildenhire.com/other/other.html. Could you take a look and tell me whats wrong with it? – DanielNolan Oct 14 '14 at 12:14
You have no jQuery attached to the page. Add it in the head before you call the bxSlider plugin – Bojan Petkovski Oct 14 '14 at 12:16
Im so sorry to be a pain but it is still not working, I have updated it online. Any idea what I am still doing wrong? @Bojan Petkovski – DanielNolan Oct 14 '14 at 12:38
You need to upload jquery.bxslider.min.js and jquery.bxslider.css to your server and then it will work :) – Bojan Petkovski Oct 14 '14 at 12:39
Thanks! Nice solution – Ragen Dazs Jan 26 '15 at 20:15
I'm working on the same thing, but want vertical scrolling if the li's child exceeds viewport height. I've got it working using height: auto on li parent elements and adjusting li height to max of $(window).height() or li child's min-height on browser resize. The only problem is that bxslider shrinks the slide width when I vertically shrink the browser. I'm assuming it's for a presumed scrollbar, but the scrollbar doesn't appear until below min-height of the li's child element. Any ideas on how to prevent this resize? If this is a different topic, happy to make new post...Kinda new to SO! – neil1967 Mar 14 '15 at 20:50
@BojanPetkovski I could kiss you :) Thanks for the above! – adamj Nov 17 '15 at 11:44
Great but I want to add captions on it, should I add captions into li or not ? – Shaig Khaligli Feb 02 '17 at 10:39

score 0 · Answer 2 · answered Oct 14 '14 at 11:27

0

Trz to set width&height to 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%;} 
*/

answered Oct 14 '14 at 11:27

pavel

24,015
8
38
57

Please add link to website where you used bx slider, it can help. – pavel Oct 14 '14 at 11:47
hello I have just uploaded it to http://www.mildenhire.com/other/other.html thanks for your help @panther – DanielNolan Oct 14 '14 at 11:52

Making BXslider full screen (filling entire browser window)

2 Answers2

Linked