I'm trying to create a fullscreen crossfade slideshow with bxslider, but one thing that I cannot complete.
There is space around images while the slideshow is going well.
I want to expand images entire window...

The slideshow is going well.

### HTML

```html
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/style.css">
  <title>Fading image slideshow</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
</head>
<body>
  <ul id="slider">
    <li style="background-image: url(img01.jpg);"></li>
    <li style="background-image: url(img02.jpg);"></li>
    <li style="background-image: url(img03.jpg);"></li>
    <li style="background-image: url(img04.jpg);"></li>
    <li style="background-image: url(img05.jpg);"></li>
    <li style="background-image: url(img06.jpg);"></li>
  </ul>
  <script>
  $(function() {
    $('#slider').bxSlider({
      mode: 'fade',
      speed: 2000,
      pause: 8000,
      auto: true,
      pager: false,
      controls: false,
      touchEnabled: false
    });
  });
  </script>
</body>

```

### CSS

```css
body {
  margin: 0;
  padding: 0;
}

.bx-viewport {
  left: 0;
  box-shadow: none;
  border: none;
}

#slider li {
  height: 100vh;
  width: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

```

I don't need any space, and I just want images to expand full screen size.