Owl Carousel加载4张图仅显2个指示点、图合并及页面横向滚动问题

问题根源为重复初始化组件、初始化时机错误，以及缺失基础适配样式，可按以下步骤修复：

• 修正JS初始化逻辑，删除重复初始化代码，所有配置均放在DOM加载完成的回调内：

<script>
    $(document).ready(function () {
        $('.owl-carousel').owlCarousel({
            loop: true,
            margin: 10,
            nav: true,
            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 1
                },
                1000: {
                    items: 1
                }
            }
        })
    });
</script>

• 补充适配样式，避免内容溢出、图片尺寸异常，可在head标签的样式表中添加如下代码：

/* 隐藏轮播溢出内容，避免页面横向滚动 */
.owl-carousel {
    overflow: hidden;
}
/* 轮播内图片自适应宽度，不变形 */
.owl-carousel .item img {
    width: 100%;
    height: auto;
    display: block;
}

• 可选优化：如果仍存在宽度溢出问题，可给轮播组件外层包裹一个限制宽度的父容器：

<div style="max-width: 100%;overflow: hidden;">
    <div class="owl-carousel owl-theme">
        <div class="item">
            <img src="images/1.jpg" alt="">
        </div>
        <div class="item">
            <img src="images/2.jpg" alt="">
        </div>
        <div class="item">
            <img src="images/3.jpg" alt="">
        </div>
        <div class="item">
            <img src="images/4.jpg" alt="">
        </div>
    </div>
</div>

以上操作完成后，轮播会正确识别4条内容生成对应指示点，单帧仅展示1张图片，也不会出现页面横向滚动的异常。

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