Bootstrap 没有活动项目的轮播

Question

我正在使用旋转木马做一个小画廊，但是，我希望它没有活动图像。这是我的代码：

<div class="card bg-primary">
<h1 class="text-center bg-secondary text-white py-2">{{placeFromUrl}}</h1>
<div class="card-body">
    <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-interval="2000">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/250px-Angular_full_color_logo.svg.png" class="d-block w-50 mx-auto">
            </div>
            <div class="carousel-item" *ngFor="let image of placeImages">
                <img src="data:image/jpeg;base64,{{image.bytes}}" class="d-block w-50 mx-auto">
            </div>
        </div>
    </div>      
</div>    
</div>

Answer 1

您可以在没有活动项目的情况下拥有它，但它不会显示任何内容。 activeclass的重点是设置display:block；默认情况下，轮播项目有 display:none。通过添加活动 class 覆盖此属性以显示此图像。您还有很多工作要做才能让它正常工作，例如添加按钮或计时器以轮换您的项目并将 class 更改为活动状态。

由于您正在使用 Angular 我建议您查看 ngb-carousel。就这么简单。

<ngb-carousel class="mt-3 bg-dark">
  <ng-template ngbSlide *ngFor="let image of repo.currentPlace.images">
    <div class="picsum-img-wrapper">
      <img style="display: block;" [src]="image.url" alt="Random first slide" [class]="getRotateClass(image)">
    </div>
    <div class="carousel-caption">
      <p>{{image.caption}}</p>
    </div>
  </ng-template>
</ngb-carousel>

ngb-carousel 是 ng-bootstrap 包的一部分。运行在工程目录下安装以下包：

npm install --save @ng-bootstrap/ng-bootstrap

然后将 NgbModule 添加到您的应用程序模块。

imports: [NgbModule, ...],

完整的安装和使用说明以及完整的代码示例位于此处：https://ng-bootstrap.github.io/#/getting-started

Bootstrap 没有活动项目的轮播

Bootstrap carousel without an active item

carousel

angular