Bootstrap 5 carousel轮播组件无法正常运行问题排查求助

你使用的轮播代码为Bootstrap 3版本语法，与Bootstrap 4/5的语法规范不兼容，这是轮播无法正常运行的核心原因，需要做以下修改：

需调整的细节点 #

• 轮播项类名替换：将所有轮播项的item类替换为carousel-item，Bootstrap 4及之后版本已不再识别旧的item类作为轮播项标识。
• 数据属性适配：
  • 如果使用Bootstrap 4，可保留data-*前缀，但如果是Bootstrap 5，需要将所有交互属性的前缀改为data-bs-*，涉及调整的属性包括data-ride、data-slide、data-target、data-slide-to，对应修改为data-bs-ride、data-bs-slide、data-bs-target、data-bs-slide-to。
  • 轮播控制按钮类名调整：将原left carousel-control替换为carousel-control-prev，right carousel-control替换为carousel-control-next。
• 布局类适配：Bootstrap 5已移除col-*-offset-*类，你代码中的col-sm-offset-2需要替换为offset-sm-2才能实现预期的居中效果。
• 依赖检查：确认页面已引入Font Awesome资源，你代码中用到的引号前缀、左右箭头图标都依赖该字体库，未引入会显示乱码或空白。

修正后的核心代码示例（适配Bootstrap 5） #

<div class="container">
  <style media="screen">
  #quote-carousel {
    padding: 0 10px 30px 10px;
    margin-top: 60px;
  }
  #quote-carousel .carousel-control-prev,
  #quote-carousel .carousel-control-next {
    background: none;
    color: #CACACA;
    font-size: 2.3em;
    text-shadow: none;
    margin-top: 30px;
  }
  #quote-carousel .carousel-indicators {
    position: relative;
    right: 50%;
    top: auto;
    bottom: 0px;
    margin-top: 20px;
    margin-right: -19px;
  }
  #quote-carousel .carousel-indicators li {
    width: 50px;
    height: 50px;
    cursor: pointer;
    border: 1px solid #ccc;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    opacity: 0.4;
    overflow: hidden;
    transition: all .4s ease-in;
    vertical-align: middle;
  }
  #quote-carousel .carousel-indicators .active {
    width: 128px;
    height: 128px;
    opacity: 1;
    transition: all .2s;
  }
  .carousel-item blockquote {
    border-left: none;
    margin: 0;
  }
  .carousel-item blockquote p:before {
    content: "\f10d";
    font-family: 'Fontawesome';
    float: left;
    margin-right: 10px;
  }
  </style>
    <div class="row">
        <div class="col-md-12">
            <div class="carousel slide" data-bs-ride="carousel" id="quote-carousel">
                <!-- 轮播内容 -->
                <div class="carousel-inner text-center">
                    <!-- 引用1 -->
                    <div class="carousel-item active">
                        <blockquote>
                            <div class="row">
                                <div class="col-sm-8 offset-sm-2">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. !</p>
                                    <small>名人名言</small>
                                </div>
                            </div>
                        </blockquote>
                    </div>
                    <!-- 引用2 -->
                    <div class="carousel-item">
                        <blockquote>
                            <div class="row">
                                <div class="col-sm-8 offset-sm-2">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
                                    <small>名人名言</small>
                                </div>
                            </div>
                        </blockquote>
                    </div>
                    <!-- 引用3 -->
                    <div class="carousel-item">
                        <blockquote>
                            <div class="row">
                                <div class="col-sm-8 offset-sm-2">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. .</p>
                                    <small>名人名言</small>
                                </div>
                            </div>
                        </blockquote>
                    </div>
                </div>
                <!-- 底部轮播指示器 -->
                <ol class="carousel-indicators">
                    <li data-bs-target="#quote-carousel" data-bs-slide-to="0" class="active"><img class="img-responsive " src="https://s3.amazonaws.com/uifaces/faces/twitter/mantia/128.jpg" alt="">
                    </li>
                    <li data-bs-target="#quote-carousel" data-bs-slide-to="1"><img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg" alt="">
                    </li>
                    <li data-bs-target="#quote-carousel" data-bs-slide-to="2"><img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="">
                    </li>
                </ol>

                <!-- 前后切换按钮 -->
                <button data-bs-slide="prev" data-bs-target="#quote-carousel" class="carousel-control-prev">
                  <i class="fa fa-chevron-left"></i>
                </button>
                <button data-bs-slide="next" data-bs-target="#quote-carousel" class="carousel-control-next">
                  <i class="fa fa-chevron-right"></i>
                </button>
            </div>
        </div>
    </div>
</div>

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