Carousel 无法显示表格或项目？ 以及如何更改指示器颜色

Question

我想使用引导程序 5 来连续显示项目，比如一组 3 到 12 个左右，下一张幻灯片有另外 3 个或 12 个，但是当我添加轮播时，它会显示彼此下方的项目这是我写的代码'' '

  <div class="row carousel-item active container-fluid">

    <div class="card col-lg-1">
      <div class="images">
        <img src="images/shoes.jpg" alt="">
      </div>
      <h3>Shoes</h3>
    </div>

    <div class="card col-lg-1">
      <div class="images">
        <img src="images/shoes2.jpg" alt="">
      </div>
      <h3>Shoes</h3>
    </div>

    <div class="card col-lg-1">
      <div class="images">
        <img src="images/shoes3.jpg" alt="">
      </div>
      <h3>Shoes</h3>
    </div>

  </div>
  <div class="row carousel-item container-fluid">

    <div class="card col-lg-1">
      <div class="images">
        <img src="images/watch.jpg" alt="">
      </div>
      <h3>Shoes</h3>
    </div>

    <div class="card col-lg-1">
      <div class="images">
        <img src="images/watch1.jpg" alt="">
      </div>
      <h3>Shoes</h3>
    </div>

    <div class="card col-lg-1">
      <div class="images">
        <img src="images/watch2.jpg" alt="">
      </div>
      <h3>Shoes</h3>
    </div>

  </div>

  <button class="carousel-control-prev" data-bs-target="#image-slider" role="button" 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" data-bs-target="#image-slider" role="button" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>

</div>

帮帮我，我不知道如何做这部分。

Answer 1

您需要将所有内容包装在父 div 中，例如
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
您可以更改 ID，但需要 classes 和 data 属性。 如果您更改 ID，请确保在其余轮播代码中更改它，例如按钮

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> <div id="carouselExampleControls" class="carousel slide bg-dark" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <div class="container py-5"> <div class="row"> <div class="col"> <div class="card text-bg-primary"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link link-light">Card link</a> </div> </div> </div> <div class="col"> <div class="card text-bg-secondary"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link link-light">Card link</a> </div> </div> </div> <div class="col"> <div class="card text-bg-success"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link link-light">Card link</a> </div> </div> </div> </div> </div> </div> <div class="carousel-item"> <div class="container py-5"> <div class="row"> <div class="col"> <div class="card text-bg-info"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link link-dark">Card link</a> </div> </div> </div> <div class="col"> <div class="card text-bg-success"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link link-light">Card link</a> </div> </div> </div> <div class="col"> <div class="card text-bg-warning"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link link-dark">Card link</a> </div> </div> </div> <div class="col"> <div class="card text-bg-danger"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link link-light">Card link</a> </div> </div> </div> </div> </div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>