Question

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

修改

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

Answer 1

经过几个小时的浪费之后，对我有用的简单而又不错的解决方案：

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

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

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

如果这不适用于您，请确保检查出我找到此修复程序的线程：
src：https://github.com/nolimits4web/swiper/issues/2218#issuecomment-509683102

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

干杯，希望对您有所帮助！

Swiper - init上的宽度错误，调整大小后的正确宽度

1 个答案: