title: I want to create a fullscreen cross fade slideshow with bxslider plugin
body: <p>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...</p>
  <p>The slideshow is going well.</p>
  <h3>HTML</h3>
  <pre class="lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;&gt;
    &lt;title&gt;Fading image slideshow&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css&quot;&gt;
    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;ul id=&quot;slider&quot;&gt;
      &lt;li style=&quot;background-image: url(img01.jpg);&quot;&gt;&lt;/li&gt;
      &lt;li style=&quot;background-image: url(img02.jpg);&quot;&gt;&lt;/li&gt;
      &lt;li style=&quot;background-image: url(img03.jpg);&quot;&gt;&lt;/li&gt;
      &lt;li style=&quot;background-image: url(img04.jpg);&quot;&gt;&lt;/li&gt;
      &lt;li style=&quot;background-image: url(img05.jpg);&quot;&gt;&lt;/li&gt;
      &lt;li style=&quot;background-image: url(img06.jpg);&quot;&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;script&gt;
    $(function() {
      $('#slider').bxSlider({
        mode: 'fade',
        speed: 2000,
        pause: 8000,
        auto: true,
        pager: false,
        controls: false,
        touchEnabled: false
      });
    });
    &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  <br />
  <h3>CSS</h3>
  <pre class="lang-css prettyprint-override"><code>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;
  }
  </code></pre>
  <p>I don't need any space, and I just want images to expand full screen size.</p>