如何仅使用Bootstrap 5为网格中的文本元素添加轮播组件

完全可以用Bootstrap 5自带的Carousel组件实现，不需要第三方插件。下面是适配你现有卡片结构的完整代码，同时解决滚动失效问题：

<!-- 先确保引入Bootstrap 5的CSS和JavaScript文件 -->
<div class="container px-4">
  <!-- 轮播容器 -->
  <div id="cardCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">
    <!-- 轮播指示器（可选，用于快速切换轮播项） -->
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#cardCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#cardCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <!-- 若有更多轮播项，继续添加对应指示器按钮 -->
    </div>
    <!-- 轮播内容容器 -->
    <div class="carousel-inner">
      <!-- 第一组轮播卡片（默认激活项） -->
      <div class="carousel-item active">
        <div class="row gx-5">
          <div class="col-md-4">
            <div class="p-5 bg-danger">
              <h5>Online Meeting</h5>
              <p></p>
            </div>
          </div>
          <div class="col-md-4">
            <div class="p-5 bg-danger">
              <h5>Best Networking</h5>
              <p>Lorem ipsum dolor sit a</p>
            </div>
          </div>
          <div class="col-md-4">
            <div class="p-5 bg-danger">
              <h5>Best Education</h5>
              <p>Sed ut perspiciatis unde omnis iste natus</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 第二组轮播卡片（示例） -->
      <div class="carousel-item">
        <div class="row gx-5">
          <div class="col-md-4">
            <div class="p-5 bg-danger">
              <h5>Another Feature</h5>
              <p>Example content for second slide</p>
            </div>
          </div>
          <div class="col-md-4">
            <div class="p-5 bg-danger">
              <h5>More Services</h5>
              <p>Additional content here</p>
            </div>
          </div>
          <div class="col-md-4">
            <div class="p-5 bg-danger">
              <h5>Extra Benefits</h5>
              <p>More text to fill the card</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 轮播切换按钮 -->
    <button class="carousel-control-prev" type="button" data-bs-target="#cardCarousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#cardCarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</div>

解决滚动失效的核心要点 #

• 引入Bootstrap JS：轮播的切换逻辑依赖Bootstrap的JavaScript文件，必须确保正确引入（包含Popper的bootstrap.bundle.js即可，无需额外依赖）。
• 正确的结构层级：严格遵循.carousel > .carousel-inner > .carousel-item的嵌套结构，你的卡片组必须放在.carousel-item内部，否则轮播无法识别切换单元。
• 标记激活项：必须给初始显示的.carousel-item添加active类，否则轮播默认不会渲染任何内容。
• 数据属性配置：data-bs-ride="carousel"开启自动轮播，data-bs-interval设置轮播间隔（单位毫秒），不需要自动轮播可移除data-bs-ride。

扩展：实现单张卡片滚动（而非整组切换） #

如果需要一次滚动一张卡片（而非整组3张切换），可以添加以下自定义CSS：

.carousel-inner {
  display: flex;
}
.carousel-item {
  flex: 0 0 33.333%; /* 匹配col-md-4的宽度占比 */
  max-width: 33.333%;
  transition: transform 0.6s ease-in-out;
}
.carousel-control-prev, .carousel-control-next {
  width: 5%;
}

然后调整轮播结构，把每个卡片单独作为一个.carousel-item，即可实现单张卡片的平滑滚动切换。

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