jquery - 为什么在左侧和顶部的 unslider 中有一个空白区域？

Question

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

这是我的 slider : 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>

Answer 1

您可以通过在 <ul> 中将填充和边距设置为 0 来实现此目的和 <li>

.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>