Owl Carousel首次加载垂直显示，刷新/调整后恢复正常的问题

这个问题大概率是轮播初始化时机过早导致的——$(document).ready()只会等待DOM结构加载完成就执行，但此时轮播里的图片还没加载完毕，Owl Carousel无法正确计算元素的实际宽度，所以会出现垂直排列的错乱。刷新或调整窗口时，图片已经加载完成，轮播重新计算布局就正常了。

以下是几个可行的解决方案：

方案1：等待所有资源加载完成后初始化轮播 #

把$(document).ready()换成$(window).load()，它会等待页面所有资源（包括图片、样式表）加载完成后再执行初始化：

$(window).load(function() {
    if ($('.owl-carousel').length) {
        $('.owl-carousel').owlCarousel({
            loop: true,
            items: 1,
            autoWidth: true,
            margin: 10,
            center: true,
            smartSpeed: 1500,
            autoplay: true,
            autoplayTimeout: 3000,
            autoplayHoverPause: true,
            responsive: {
                1000: {
                    items: 3,
                    margin:94
                },
            }
        });
    }
});

方案2：监听轮播内图片加载完成后初始化 #

如果不想等全部资源加载，只监听轮播里的图片，确保图片加载完毕再初始化：

$(document).ready(function() {
    const $carousel = $('.owl-carousel');
    if (!$carousel.length) return;

    const $carouselImgs = $carousel.find('img');
    let loadedCount = 0;

    $carouselImgs.on('load', function() {
        loadedCount++;
        // 所有图片加载完成后初始化轮播
        if (loadedCount === $carouselImgs.length) {
            $carousel.owlCarousel({
                loop: true,
                items: 1,
                autoWidth: true,
                margin: 10,
                center: true,
                smartSpeed: 1500,
                autoplay: true,
                autoplayTimeout: 3000,
                autoplayHoverPause: true,
                responsive: {
                    1000: {
                        items: 3,
                        margin:94
                    },
                }
            });
        }
    });

    // 处理图片已经被浏览器缓存的情况
    $carouselImgs.each(function() {
        if (this.complete) $(this).trigger('load');
    });
});

方案3：初始化后手动触发resize事件 #

如果还是想用document.ready，可以在初始化完成后强制触发一次窗口resize事件，让轮播重新计算布局：

$(document).ready(function() {
    if ($('.owl-carousel').length) {
        $('.owl-carousel').owlCarousel({
            loop: true,
            items: 1,
            autoWidth: true,
            margin: 10,
            center: true,
            smartSpeed: 1500,
            autoplay: true,
            autoplayTimeout: 3000,
            autoplayHoverPause: true,
            responsive: {
                1000: {
                    items: 3,
                    margin:94
                },
            }
        });
        // 手动触发resize，强制轮播重新计算布局
        $(window).trigger('resize');
    }
});

额外优化建议 #

如果你的图片尺寸固定，可以给图片设置明确的宽度，避免图片未加载时宽度为0导致布局错乱：

.slider-items img {
    width: 300px; /* 根据你的实际图片尺寸调整 */
    height: auto;
}

内容的提问来源于stack exchange，提问作者Rameez Hameed