如何实现Bootstrap卡片从左到右自动滑动轮播效果

你可以直接复用Bootstrap自带的Carousel轮播组件完成需求，无需引入额外第三方依赖，和你现有卡片结构适配性很高，具体实现如下：

实现效果说明 #

默认从左到右自动滑动，支持循环轮播，可自定义轮播间隔速度，也可调整配置实现单页展示多张卡片同时滑动的效果。

完整实现代码 #

<!-- 项目已经引入Bootstrap依赖的话可以跳过以下两行 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- 学员评价模块头部 -->
<div class="container my-5">
  <h3>学员评价</h3>
  <p>了解DevNation的学员和毕业生对我们的评价</p>

  <!-- 轮播核心结构 -->
  <div id="studentReviewCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000" data-bs-wrap="true">
    <!-- 轮播内容区 -->
    <div class="carousel-inner">
      <!-- 第一张轮播项：Abdul Rehman -->
      <div class="carousel-item active">
        <div class="card bg-primary text-white" style="width: 22rem; margin: 0 auto;">
          <div class="card-header d-flex">
            <!-- 头像可替换成对应图片路径 -->
            <img src="./img/Abdul Rehman.jpeg" alt="Abdul Rehman" width="20%" style="border-radius: 20%;">
            <div class="ms-3">
              <h4 class="card-title mb-1">Abdul Rehman</h4>
              <div class="card-subtitle">批次1：软件工程师</div>
            </div>
          </div>
          <div class="card-body">
            <p class="card-text">
              “DevNation是开发者提升技能、成为领域专家的最佳平台，拥有经验丰富的导师，是巴基斯坦最优秀的教学机构。它打磨了我的技能，帮助我更好地理解开发技巧，我十分荣幸能成为DevNation的一员。”
            </p>
          </div>
        </div>
      </div>

      <!-- 第二张轮播项：Zeenat Perveen -->
      <div class="carousel-item">
        <div class="card bg-primary text-white" style="width: 22rem; margin: 0 auto;">
          <div class="card-header d-flex">
            <img src="./img/Zeenat Perveen.jpeg" alt="Zeenat Perveen" width="20%" style="border-radius: 20%;">
            <div class="ms-3">
              <h4 class="card-title mb-1">Zeenat Perveen</h4>
              <div class="card-subtitle">批次1：前端开发工程师</div>
            </div>
          </div>
          <div class="card-body">
            <p class="card-text">
              “DevNation是学习Web开发技能的首选，导师技术精湛，具备前沿知识和优秀的指导能力，可通过实操学习新技能、积累专业经验，是提升技能、实现职业发展的最优推荐平台。”
            </p>
          </div>
        </div>
      </div>

      <!-- 第三张轮播项：Fariha Rehman -->
      <div class="carousel-item">
        <div class="card bg-primary text-white" style="width: 22rem; margin: 0 auto;">
          <div class="card-header d-flex">
            <img src="./img/Fariha Rajput.jpeg" alt="Fariha Rehman" width="20%" style="border-radius: 20%;">
            <div class="ms-3">
              <h4 class="card-title mb-1">Fariha Rehman</h4>
              <div class="card-subtitle">软件工程师</div>
            </div>
          </div>
          <div class="card-body">
            <p class="card-text">
              “现在我应对棘手问题和高难度编码任务的能力提升了很多，能参加这次高质量的培训我非常自豪。言语无法表达这次培训对我的意义，非常感谢DevNation团队。”
            </p>
          </div>
        </div>
      </div>

      <!-- 第四张轮播项：Hamza Masood -->
      <div class="carousel-item">
        <div class="card bg-primary text-white" style="width: 22rem; margin: 0 auto;">
          <div class="card-header d-flex">
            <img src="./img/Hamza Masood.jpeg" alt="Hamza Masood" width="20%" style="border-radius: 20%;">
            <div class="ms-3">
              <h4 class="card-title mb-1">Hamza Masood</h4>
              <div class="card-subtitle">软件工程师</div>
            </div>
          </div>
          <div class="card-body">
            <p class="card-text">
              “DevNation是个非常棒的平台，帮我掌握了很多新技能。感谢你们帮我克服难关，信任我的能力，引导我走到了想去的位置，没有你们我根本做不到。”
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 轮播左右切换按钮，不需要可以直接删除 -->
    <button class="carousel-control-prev" type="button" data-bs-target="#studentReviewCarousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon bg-dark rounded" aria-hidden="true"></span>
      <span class="visually-hidden">上一个</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#studentReviewCarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon bg-dark rounded" aria-hidden="true"></span>
      <span class="visually-hidden">下一个</span>
    </button>
  </div>
</div>

常用参数调整 #

• 轮播速度：修改data-bs-interval的数值即可，单位为毫秒，3000即3秒切换一次
• 关闭自动轮播：删除data-bs-ride="carousel"属性即可
• 单页展示多张卡片：给.carousel-inner添加d-flex样式，给.carousel-item添加flex: 0 0 33.33%（单页3张的配置），同时调整JS配置让每次滑动移动一个卡片的距离即可。

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