全宽 Swiper 在幻灯片左侧有一个间隙

Question

大屏幕 Windows 版 Chrome 上的 Swiper 插件存在问题。 它在幻灯片的左侧留下了空白，我创建了一支笔来演示这一点：

https://codepen.io/anon/pen/BwMxWX

HTML：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
</div>

CSS：

.swiper-slide {
  width: 100vw;
  height: 300px;
}

.swiper-slide:nth-child(1) { background-color: lightpink; }
.swiper-slide:nth-child(2) { background-color: lightblue; }
.swiper-slide:nth-child(3) { background-color: lightgrey; }

JS：

new Swiper(".swiper-container", {
  loop: true
});

请记住，它只会在这些情况下发生。 即使您在 Windows 上使用 Chrome，如果窗口大小小于（大约）2000 像素，则不会发生。

在插件的主页上有一个全宽示例并且该问题不存在，但我并不真正理解首先是什么导致它发生。 任何帮助将不胜感激。

更新：

我发现这只会在使用“幻灯片”效果时发生，这是默认设置。 将其更改为任何其他修复它，但这远非解决方案。

Answer 1

尝试设置slidesPerView: auto

const mySwiper = new Swiper('.swiper-container', {
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: 'true'
    },
    slidesPerView: 'auto', /* Set me! */  
});

更新：

在某些移动 Android 设备上，这个错误再次出现（即使在进行了上述更改之后）。 我在 swiper 的容器中添加了以下内容，它似乎为我修复了它：

overflow: hidden;

Answer 2

我会首先尝试将 .swiper-slide 中的宽度更改为 100%。 视图窗口和 % 不是一对一的。 因此，100vw 不等于 100%。 这是一个参考页面： https : //teamtreehouse.com/community/viewport-units-vs-percentages

Answer 3

如果这是有问题的演示： http : //idangero.us/swiper/demos/010-default.html ，我能看到的唯一区别是 spier-slide 上的默认宽度设置设置为 100%，然后被覆盖通过内联 JS 到视口的像素宽度。 您的 codepen 初始设置（如您所见）为 100vw。

.swiper-slide {
  width: 100%;
}

不是在窗户上，而是四处探查。