swiper2.7.6 拖动到最后一页跳回第一页时出现一半白屏

Question

swiper2.7.6 拖动到最后一页跳回第一页时出现一半白屏

代码:

html:

    <div class="banners">

      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">slider1</div>
          <div class="swiper-slide">slider2</div>
          <div class="swiper-slide">slider3</div>
        </div>
        <div class="pagination"></div>
      </div>
    </div>

css:

.banners {
    position: relative;
}

.swiper-container {
    height: 200px;
}

.swiper-container .swiper-slide {
    padding: 20px;
    color: #fff;
    background-color: yellowgreen;
}

.swiper-container .pagination {
    position: absolute;
    z-index: 20;
    bottom: 10px;
    width: 100%;
    text-align: center;
}

.swiper-container .swiper-pagination-switch {
    display: inline-block;
    width: 8px;
    height: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background: #555;
    margin: 0 5px;
    opacity: 0.8;
    border: 1px solid #fff;
    cursor: pointer;
}

..swiper-container .swiper-active-switch {
    background: #fff;
}

js:

$(function() {
  var mySwiper = new Swiper(".swiper-container", {
    autoplay: 1000, //可选选项，自动滑动
    loop: true, //可选选项，开启循环
    draggable : true,
    snapOnRelease : true,
    freeMode: false,
    pagination : '.pagination',
  });
});

Answer 1

解决了，是由于 .swiper-slide 设置 padding: 20px; 造成的。