如何更改引导滑块按钮颜色

Answer 1

您可以创建如下规则：

.carousel-control-prev-icon {
    color: blue;
    background-color: green;
}

.carousel-control-prev-icon {
    color: blue;
    background-color: green;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-8 col-md-12 col-sm-12">
  <div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <h4>"The best agency we’ve worked with so far. They understand our product and are able to add new features with a great focus."</h4>
        <div class="client-info d-flex my-5">
          <div class="img rounded-circle mx-3">
            <img src="https://placehold.co/100x100" class="w-100 rounded-circle" alt="">
          </div>
          <div class="info">
            <h5>Jenny Wilson</h5>
            <p>Vice President</p>
          </div>
        </div>
      </div>
      <div class="carousel-item active">
        <h4>"The best agency we’ve worked with so far. They understand our product and are able to add new features with a great focus."</h4>
        <div class="client-info d-flex my-5">
          <div class="img rounded-circle mx-3">
            <img src="https://placehold.co/100x100" class="w-100 rounded-circle" alt="">
          </div>
          <div class="info">
            <h5>Jenny Wilson</h5>
            <p>Vice President</p>
          </div>
        </div>
      </div>
      <div class="carousel-item active">
        <h4>"The best agency we’ve worked with so far. They understand our product and are able to add new features with a great focus."</h4>
        <div class="client-info d-flex my-5">
          <div class="img rounded-circle mx-3">
            <img src="https://placehold.co/100x100" class="w-100 rounded-circle" alt="">
          </div>
          <div class="info">
            <h5>Jenny Wilson</h5>
            <p>Vice President</p>
          </div>
        </div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" 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="#carouselExampleAutoplaying" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>