Bootstrap 5图片轮播组件无法正常工作的问题求助

你的代码里存在几处不符合Bootstrap 5规范的问题，以下是具体修复点和修正后的代码：

错误点说明 #

• 重复引入Bootstrap JS文件：head中已引入包含Popper.js的bootstrap.bundle.min.js，底部重复引入Popper和bootstrap.min.js会导致JS冲突，需删除重复引入。
• Bootstrap 5 属性前缀缺失：所有data属性必须添加bs-前缀，原data-ride、data-target、data-slide需改为data-bs-ride、data-bs-target、data-bs-slide。
• 轮播指示器目标ID不匹配：轮播容器ID是carimages，但指示器的data-bs-target写的是#carimage（少了末尾的s），无法关联正确容器。
• 多个轮播项设置active类：轮播仅允许一个carousel-item带有active类，否则所有图片会同时显示，无法切换。
• 控制按钮类名错误：Bootstrap 5 更新了控制按钮类名，原left carousel-control、right carousel-control需改为carousel-control-prev、carousel-control-next，图标类icon-prev、icon-next改为carousel-control-prev-icon、carousel-control-next-icon。

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
        crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <div id="carimages" class="carousel slide" data-bs-ride="carousel">
            <ol class="carousel-indicators">
                <li data-bs-target="#carimages" data-bs-slide-to="0" class="active"></li>
                <li data-bs-target="#carimages" data-bs-slide-to="1"></li>
                <li data-bs-target="#carimages" data-bs-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active"><img src="slide 1.jpg" alt=""></div>
                <div class="carousel-item"><img src="slide 2.jpg" alt=""></div>
                <div class="carousel-item"><img src="slide 3.jpg" alt=""></div>
            </div>
             <a class="carousel-control-prev" href="#carimages" role="button" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carimages" role="button" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </a>
        </div>
     </div>
</body>
</html>

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