Owl Carousel响应式配置下owl-dots异常需刷新才可生效问题求助

Owl Carousel 原生响应式机制仅对 nav、items、margin 这类高频切换配置做了实时更新支持，dotsData 属于初始化阶段才会读取渲染的配置项，响应式断点触发时不会自动销毁重建指示点结构，因此必须刷新页面才能生效。

通过防抖函数监听窗口尺寸变化，断点切换时先销毁原有轮播实例，再按当前视口尺寸重新初始化，即可实现指示点配置的实时切换：

$(window).on('load', function() {
    const next_icon = '<img src="./images/next-icon.svg">';
    const prev_icon = '<img src="./images/prev-icon.svg">';
    let owlInstance = null;

    // 轮播初始化函数
    function initOwl() {
        // 先销毁已有实例
        if (owlInstance) {
            $('.owl-carousel').trigger('destroy.owl.carousel');
            $('.owl-carousel').removeClass('owl-loaded');
        }
        // 重新初始化
        owlInstance = $('.owl-carousel').owlCarousel({
            loop: true,
            margin: 30,
            items: 1,
            dots: true,
            responsiveClass: true,
            navText: [prev_icon, next_icon],
            responsive: {
                0: {
                    dotData: true,
                    dotsData: true,
                    nav: false,
                },
                1025: {
                    dotData: false,
                    dotsData: false,
                    nav: true,
                }
            }
        });
    }

    // 首次初始化
    initOwl();

    // 防抖函数，避免resize高频触发重复初始化
    let resizeTimer = null;
    $(window).on('resize', function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(initOwl, 200);
    });
});

• 200ms的防抖延时可根据实际需求调整，平衡响应速度和性能消耗
• 销毁实例时主动移除owl-loaded类可以避免原有DOM结构残留影响新实例渲染

内容的提问来源于stack exchange，提问作者Thuan Nguyen Nam