引导轮播不适用于多个实例

Question

我正在尝试在我的网站上实现多个 Bootstrap 轮播，一个用于桌面，另一个用于移动设备，但我遇到了让它们正常工作的问题。这是我的 HTML 代码：

<div class="d-none d-lg-block" id="carouselExampleIndicators-desktop" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="images/home.png" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="images/home1.png" alt="Second slide">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators-desktop" 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="#carouselExampleIndicators-desktop" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

<div class="d-block d-lg-none" id="carouselExampleIndicators-mobile" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="images/mobile1.png" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="images/mobile1.png" alt="Second slide">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators-mobile" 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="#carouselExampleIndicators-mobile" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

但是，尽管遵循了 Bootstrap 文档，轮播仍无法按预期运行。指示器和控件不起作用，幻灯片不转换。

附加信息：

-

• 我已验证 ID 和类别是否已正确分配。

• 我已检查浏览器控制台是否有任何错误，但没有报告明显的问题。

我尝试过的：我尝试在我的网站上实现两个 Bootstrap 轮播，一个用于桌面，另一个用于移动设备。

期望：我希望两个轮播都能正常运行，具有工作指示器和控件，允许用户无缝地浏览幻灯片。桌面轮播应仅在大于 lg（大）的屏幕上可见，而移动轮播应在小于 lg 的屏幕上可见。

结果：不幸的是，两个轮播都没有按预期工作。指示器和控件无响应，并且幻灯片未按预期转换。我已确保包含必要的 Bootstrap JavaScript 和 CSS 文件，验证了 ID 和类的正确分配，并检查了浏览器控制台是否有错误，但我无法确定问题的根本原因。

Answer 1

您已定义

class

属性两次：

class="d-none d-lg-block" id="carouselExampleIndicators-desktop" class="carousel slide"

应该是：

class="d-none d-lg-block carousel slide" id="carouselExampleIndicators-desktop"