0

我正在尝试在我的 Angular 13 项目中使用 Bootstrap 5 Carousel 幻灯片。在开发中一切正常ng serve，但是一旦我构建了一个生产版本ng build，它就不起作用了，轮播缺少幻灯片效果，下一张图片立即出现在滑动图片下方。我在设置中缺少什么吗？

回购：https ://github.com/ebem/angular-bs-carousel

我在 angular.json 中添加了 .js 和 .css 文件

  "styles": [
          "src/styles.scss",
          "node_modules/bootstrap/dist/css/bootstrap.min.css"
        ],
  "scripts": [
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]

并在 app.component.html 中添加了轮播（来自引导程序的示例）

<div style="height: 200px; width: 200px;">
  <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://i.picsum.photos/id/311/200/300.jpg?hmac=ltcRErkHQZRTlJl3xZ_6HSzWzco1GSU3zbZhA12WvJw" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>First slide label</h5>
          <p>Some representative placeholder content for the first slide.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="https://i.picsum.photos/id/1057/200/300.jpg?hmac=NbjAWVAsLFsIna7Sw8vp4X2BhTpao1KbwORuUZlAcWw" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>Second slide label</h5>
          <p>Some representative placeholder content for the second slide.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="https://i.picsum.photos/id/718/200/300.jpg?hmac=33vt_lg60EIOuc--jquKwN9epg7jFtlsroU-yn2NvLw" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>Third slide label</h5>
          <p>Some representative placeholder content for the third slide.</p>
        </div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</div>

4

0 回答 0