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 fu

Answer 1

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%;} 
*/

Answer 2

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