Question

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

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，如果窗口大小小于（大约）2000px，那么它也不会发生。

在插件的主页上有一个全宽的示例，问题不存在，但我真的不明白是什么让它首先发生。任何帮助将不胜感激。

更新：

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

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%;
}

不是在窗户上，而是四处寻找。

全宽Swiper在滑块左侧有一个间隙

3 个答案: