Swiper - 初始化时宽度错误，调整大小后宽度正确答案

【问题标题】：Swiper - wrong width on init, correct width after resizeSwiper - 初始化时宽度错误，调整大小后宽度正确
【发布时间】：2016-08-19 08:03:16
【问题描述】：

我正在使用 Swiper 进行一个项目，并且在调整窗口大小后一切正常。但在初始化时，幻灯片的宽度不正确。我尝试在本地复制它，但没有成功。我为每个视图设置了 4 张幻灯片，但它正在计算 3 1/2 张幻灯片的宽度。我从我的配置中清除了除了 slidesPerView 之外的所有内容，但根本没有任何变化。会不会是与其他框架或插件的某种冲突？如果需要其他信息来解决此问题，请询问！ :-)

编辑

HTML：

<div id="gallery_container">
    <div id="galleryLeft"></div>
    <div id="gallery-swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                ...
            </div>
        </div>
    </div>
    <div id="galleryRight"></div>
</div>

初始化：

(function($) {
    $(document).ready(function() {
        var gallery_swiper = new Swiper('#gallery-swiper', {
            slidesPerView: 3,
            spaceBetween: 0,
            speed: 500,
            prevButton: '#galleryLeft',
            nextButton: '#galleryRight'
        });

        var slides = gallery_swiper.slides.length;
        if(slides < 4) {
            $('#galleryLeft').css("display", "none");
            $('#galleryRight').css("display", "none");
            $('#gallery_container').css({
                "padding": "0"
            });
        }
    });
})(jQuery);

也许值得注意的是，gallery_container 是响应式的。滑块位于列内。

【问题讨论】：

这里需要提供一些代码
@edisoni.1337 你有什么想法吗？
请构建一个 js fiddle 因为我无法让它与这个插件或框架一起工作
@edisoni.1337 我努力重现这个问题，但它不起作用。在我删除了 mmenu 插件的 JS 之后，它起作用了。我在本地文件中尝试了这个，它在 mmenu 上运行良好。无法弄清楚问题隐藏在哪里。知道如何检查吗？
我找到了问题所在。这是关于初始化脚本的排名。 swiper 位于 html 语法的中间，而 mmenu 位于主体底部，这在滑块已经建立后将包装器推向右侧。谢谢你的帮助！ :)

标签： javascript jquery html css swiper

【解决方案1】：

在浪费了几个小时之后，对我有用的简单而好的解决方案：

window.addEventListener('load', () => {
// init swiper here
}, false);

加载整个页面时触发 load 事件，包括所有依赖资源，例如样式表和图像。

文档：
https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

如果这对您不起作用，请务必查看我找到此修复程序的线程：
源：https://github.com/nolimits4web/swiper/issues/2218#issuecomment-509683102

还有其他可能的解决方案（例如：浏览器扩展也可能导致此问题）：

干杯，我希望这对某人有帮助！

【讨论】：

非常感谢。你真的救了我这个。