jquery - 为什么左侧和顶部的未滑动区域都留有空白？

我正在使用名为unslider的滑块。滑块工作正常，但有一件事让我很烦。在第一张幻灯片中，左侧有空白。在其余的幻灯片中，顶部也有空间。

这是我的滑块：
http://jsfiddle.net/132xmhbd/
您也可以运行代码段！

.banner {
  position: relative;
  overflow: auto;
  width: 100vw;
  border: 1px solid black;
}
.banner li {
  list-style: none;
  width: 100vw;
  height: 200px;
}
.banner ul li {
  float: left;
  width: 100%;
}
.dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  text-align: center;
}
.dots li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 4px;
  text-indent: -999em;
  border: 2px solid #fff;
  border-radius: 6px;
  cursor: pointer;
  opacity: .4;
  -webkit-transition: background .5s, opacity .5s;
  -moz-transition: background .5s, opacity .5s;
  transition: background .5s, opacity .5s;
}
.dots li.active {
  background: #fff;
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://unslider.com/unslider.min.js"></script>

<div class="banner">
  <ul>
    <li style="background: pink;">This is a slide.</li>
    <li style="background: lightgreen;">This is another slide.</li>
    <li>This is a final slide.</li>
  </ul>
</div>

<script>
  $(function() {
    $('.banner').unslider({
      dots: true,
      fluid: true,
    });
  });
</script>

最佳答案

您可以通过在<ul>和<li>中将padding和margin设置为0来实现此目的。

.banner {
  position: relative;
  overflow: auto;
  width: 100vw;
  border: 1px solid black;
}
.banner li {
  list-style: none;
  width: 100vw;
  height: 200px;
}
.banner ul , li {
  margin:0;
  padding:0;
}

.banner ul li {
  float: left;
  width: 100%;
}
.dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  text-align: center;
}
.dots li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 4px;
  text-indent: -999em;
  border: 2px solid #fff;
  border-radius: 6px;
  cursor: pointer;
  opacity: .4;
  -webkit-transition: background .5s, opacity .5s;
  -moz-transition: background .5s, opacity .5s;
  transition: background .5s, opacity .5s;
}
.dots li.active {
  background: #fff;
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://unslider.com/unslider.min.js"></script>

<div class="banner">
  <ul>
    <li style="background: pink;">This is a slide.</li>
    <li style="background: lightgreen;">This is another slide.</li>
    <li>This is a final slide.</li>
  </ul>
</div>

<script>
  $(function() {
    $('.banner').unslider({
      dots: true,
      fluid: true,
    });
  });
</script>