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

【问题标题】：Full width Swiper has a gap to the left of slides全宽 Swiper 在幻灯片左侧有一个间隙
【发布时间】：2017-10-19 12:58:23
【问题描述】：

在具有大屏幕的 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 像素，也不会发生这种情况。

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

更新：

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

【问题讨论】：

我尝试将 chrome 上的分辨率欺骗为 3840 x 2140（我在 Mac 13 上）。但我没有在左边得到任何空白，任何特定的目标分辨率？上班后我可能会在大屏幕上试一试。
我正在使用带有 Windows 的 iMac 来测试它（2560x1440），它只发生在 Chrome 上并且当窗口宽度约为 2000 像素时，小于这个值并且不会发生。如果我用开发工具欺骗宽度也很好，所以这不会帮助你看到它。

标签： javascript css swiper

【解决方案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;

【讨论】：

我还注意到该行为仅在使用 GPU 加速时才会发生，因此如果 slidesPerView 选项无效，您可以尝试设置 cssMode: 'true'（使用 CSS 过渡而不是默认的 GPU 过渡）。其他注意事项：检查脚本/样式的加载顺序，最后 swiper.js 文档建议避免幻灯片容器上的边距以获得最佳效果（但我不确定为什么会有所不同）。

【解决方案2】：

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

【讨论】：

问题是，JS 是内联视口像素宽度。但也看到了。
没关系，问题依然存在。

【解决方案3】：

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

.swiper-slide {
  width: 100%;
}

不是在窗户上，而是在四处闲逛。

【讨论】：

其实我指的是主页 (idangero.us/swiper)，但在那个例子中它也发生了。
您可以使用控制台查询视口宽度并确认它与应用于 swiper-slide div 节点的像素宽度相同吗？
是的，视口宽度与滑动器应用于所有幻灯片的style="width: 2560px" 匹配。我确信这是一个渲染问题。
我认为 Windows 上的某个人需要加强。通过控制台检查时你什么也没看到？