Swiper - 启动时宽度错误，调整大小后宽度正确。

Question

我正在使用Swiper做一个项目，调整窗口大小后，一切都很正常。但是在启动时，幻灯片的宽度不正确。我尝试在本地重现这个问题，但没有成功。我为每个视图设置了4个幻灯片，但它计算的是3个12个幻灯片的宽度。我清除了配置中除了slidesPerView之外的所有内容，但没有任何变化。会不会是与其他框架或插件发生了某种碰撞？如果需要更多的信息来解决这个问题，就问吧! :-)

EDIT

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>

Initialisation:

(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是响应的。滑块被放置在一列内。

Answer 1

在浪费了一些时间之后，我找到了一个简单而又好的解决方案。

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

当整个页面加载完毕，包括所有依赖的资源，比如样式表和图片，加载事件就会被触发。

文档。https:/developer.mozilla.orgen-USdocsWebAPIWindowload_event。

---

如果这对你不起作用，请务必查看我找到这个修复方法的线程： src./github.comnolimits4webwipersissues2218#issuecomment-509683102。https:/github.comnolimits4webswiperissues2218#issuecomment-509683102

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

干杯，我希望这能帮助到别人！