Bootstrap v5.2中Carousel轮播组件异常：仅显示单个轮播项且切换按钮无效的问题求助

Hey there! 我帮你排查了代码里的几个关键问题，这些都是Bootstrap 5版本升级后容易踩的小坑，咱们一个个来解决：

问题1：HTML结构不规范 #

你的代码里有重复的<html>标签，而且<head>结束后直接放置了轮播组件的<div>，没有包裹在<body>标签内。浏览器对不完整的HTML结构渲染会出现异常，这可能是轮播无法正常工作的潜在原因。

修正方式：

• 合并重复的<html>标签，保留带lang属性的那个
• 把所有页面可视内容（轮播组件）放在<body>标签内部

问题2：Bootstrap 5的Data属性前缀变更 #

Bootstrap 5对所有自定义的data属性统一添加了bs-前缀，替换了旧版本的无前缀写法——这正是你的切换按钮完全没反应的核心原因：

• 原来的data-ride="false"需要改为data-bs-ride="carousel"（v5中推荐用这个值来自动初始化轮播）
• 切换按钮上的data-slide="prev"/data-slide="next"需要改为data-bs-slide="prev"/data-bs-slide="next"

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TinDog</title>
    <!-- css stylesheets -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <!-- bootstrap scripts -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
</head>
<body>
    <div id="testimonial-carousel" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
                <img class="testimonial-img" src="images/dog-img.jpg" alt="dog-profile">
                <em>Pebbles, New York</em>
            </div>
            <div class="carousel-item">
                <h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
                <img class="testimonial-img" src="images/lady-img.jpg" alt="lady-profile">
                <em>Beverly, Illinois</em>
            </div>
        </div>
        <a class="carousel-control-prev" href="#testimonial-carousel" role="button" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#testimonial-carousel" role="button" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</body>
</html>

做完这些修改后，你的轮播应该就能正常显示两个轮播项，并且点击切换按钮可以顺畅切换了。

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