如何为Bootstrap 5轮播组件添加带名称的标签切换项？

以下是实现带文字标签轮播指示器的完整代码，替换了默认的圆点指示器，同时保留Bootstrap轮播的原生切换逻辑：

<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  <style>
    /* 自定义带文字的轮播指示器样式 */
    .carousel-indicators {
      position: static;
      margin-top: 1rem;
      gap: 0.5rem;
      justify-content: center;
    }
    .carousel-indicators button {
      width: auto;
      height: auto;
      padding: 0.5rem 1.2rem;
      border-radius: 0.3rem;
      background-color: #e9ecef;
      color: #495057;
      text-indent: 0;
      border: none;
      transition: all 0.3s ease;
    }
    .carousel-indicators button.active {
      background-color: #0d6efd;
      color: white;
    }
    .home-contain {
      position: relative;
    }
  </style>
</head>

<div class="col-xl-6 col-md-12 ratio_65">
        <div class="row g-3">
          <div class="col-xl-12 col-sm-12">
            <div class="home-contain">
              <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
                <!-- 修改后的带文字指示器 -->
                <div class="carousel-indicators">
                  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true">标签1</button>
                  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1">标签2</button>
                  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2">标签3</button>
                </div>
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100" alt="轮播图1">
                  </div>
                  <div class="carousel-item">
                    <img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100" alt="轮播图2">
                  </div>
                  <div class="carousel-item">
                    <img src="https://img.freepik.com/free-vector/elegant-merry-christmas-new-year-card-with-realistic-blue-decoration_1361-3053.jpg?w=1380&t=st=1673707221~exp=1673707821~hmac=221ab41285bb5fac3c32463b2bbf57775f7a7f3fa66525b2bd94233df897dd67" class="d-block w-100" alt="轮播图3">
                  </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  <span class="visually-hidden">上一张</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="visually-hidden">下一张</span>
                </button>
              </div>
              <div class="home-detail text-white p-center text-center">
                <div>
                  <h4 class="text-center">
                    Organic Lifestyle
                  </h4>
                  <h5 class="text-center">
                    Best Weekend Sales
                  </h5>
                </div>
              </div>
            </div>
          </div>
</div>
</div>

关键修改说明 #

• 调整carousel-indicators定位：从默认绝对定位改为静态定位，放在轮播图下方，通过gap和margin-top控制间距
• 重写指示器按钮样式：去掉默认圆点样式，改为带内边距的标签形态，设置常规状态和激活状态的背景色、文字色
• 保留原生属性：所有按钮仍保留data-bs-target和data-bs-slide-to属性，确保Bootstrap轮播的切换逻辑正常生效

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