Bootstrap 5 Carousel滑动异常问题求助

问题核心原因 #

你遇到的轮播卡在第二张、打开开发者工具后恢复的问题，主要由元素选择器错误、DOM结构冗余和初始化时机不当导致，以下是具体修正方案：

1. 修正ID选择器错误 #

你的轮播容器ID写成了 id=".Carousel"，这里的前缀点是多余的，ID无需加.前缀，正确写法应为 id="Carousel"。这个错误会导致后续JS无法正确选中轮播组件，直接引发初始化失败。

2. 清理冗余的ratio类嵌套 #

你在carousel-item里嵌套了ratio ratio-21x9，又给图片加了ratio ratio-16x9，双重ratio类会导致尺寸计算混乱，这是轮播切换异常的常见诱因。建议只在父容器保留一个ratio类即可。

3. 修复JS初始化逻辑 #

你使用的$(window).load()是jQuery旧版写法，Bootstrap 5已不再依赖jQuery（除非手动引入），且脚本放在页面顶部会导致DOM未加载完成就执行，无法选中元素。

修正后的完整代码 #

HTML部分

<!-- Image Carousel -->
<div id="Carousel" class="carousel pt-5 slide bg-dark" data-bs-touch="false" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active" data-bs-interval="5000">
            <div class="ratio ratio-21x9">
                <img src="../FrontEnd/Images/Home/MainPicture.jpeg" class="d-block w-100" alt="Main Picture">
            </div>
        </div>
        <div class="carousel-item" data-bs-interval="5000">
            <div class="ratio ratio-21x9">
                <img src="../FrontEnd/Images/Home/BiliardBar.jpeg" class="d-block w-100" alt="Billiard And Bar">
            </div>
        </div>
        <div class="carousel-item" data-bs-interval="5000">
            <div class="ratio ratio-21x9">
                <img src="../FrontEnd/Images/Home/Darts.jpeg" class="d-block w-100" alt="Darts">
            </div>
        </div>
    </div>
</div>
<!-- End of Image Carousel -->

手动初始化JS（可选）

如果需要自定义轮播配置，或自动初始化失效，使用Bootstrap原生JS写法（无需jQuery），并将脚本放在</body>标签前：

<script>
document.addEventListener('DOMContentLoaded', function() {
    const carousel = new bootstrap.Carousel(document.getElementById('Carousel'), {
        interval: 5000,
        touch: false
    });
});
</script>

额外排查点 #

• 确保Bootstrap 5的CSS和JS文件版本一致且引入正确
• 检查图片路径是否有效：图片加载失败会导致轮播高度计算异常，引发切换卡顿
• 保持DOM结构简洁，避免不必要的嵌套类干扰组件逻辑

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