BX Slider: Full-Screen Images

by Matthew Schenker

HTML

<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<ul class="bxslider">
  <li style="background-image: url('http://workshop.rs/demo/gallery-in-4-lines/images/image_01_thumb.jpg');"></li>
  <li style="background-image: url('http://workshop.rs/demo/gallery-in-4-lines/images/image_02_thumb.jpg');"></li>
  <li style="background-image: url('http://workshop.rs/demo/gallery-in-4-lines/images/image_03_thumb.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;
}

JavaScript

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