如何在 Angular Bootstrap Carousel 中有多个卡片项目？答案

【问题标题】：How to have multiple card items in Angular Bootstrap Carousel?如何在 Angular Bootstrap Carousel 中有多个卡片项目？
【发布时间】：2021-04-17 12:12:06
【问题描述】：

我正在使用这个carousel。

我想要多项目轮播here 之类的东西。

我尝试关注此tutorial，但它最终破坏了我的网站并导致许多错误。

我尝试过的：

<ngb-carousel *ngIf="images">
  <ng-template ngbSlide>
    <div class="row">
      <div class="item card col-md-3" *ngFor="let image of images">
        <img src="{{image.picture}}" class="card-img-top" alt="...">
        <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="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
  </ng-template>
</ngb-carousel>

它没有达到我想要的。我想要在同一行中有 2 或 3 个项目，您可以滑过。您将如何使用 Angular Bootstrap Carousel 实现这一目标？

我最后的手段是为MDB 图书馆付费。您的帮助将不胜感激。谢谢。

【问题讨论】：

标签： angular carousel angular-bootstrap

【解决方案1】：

我现在使用PrimeNG Carousel。它做我想做的事。

我的代码：

component.html

<div class="content-section implementation carousel-demo">
  <div class="card">
      <p-carousel [value]="images" styleClass="custom-carousel" [numVisible]="3" [numScroll]="1"
      [circular]="true" [autoplayInterval]="0" [responsiveOptions]="responsiveOptions">
          <ng-template let-image pTemplate="item">
            <div class="item card">
              <img src="{{image.picture}}" class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">{{image.random}}</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="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </ng-template>
      </p-carousel>
  </div>
</div>

component.ts

export class CarouselComponent implements OnInit {
    images; 
    responsiveOptions;

    constructor() {
        this.responsiveOptions = [{
            breakpoint: '1024px',
            numVisible: 1,
            numScroll: 3
        }];
    }

    ngOnInit(): void {
        this.images = [
            {random: 'Random', picture: 'https://picsum.photos/id/944/900/500'},
            {random: 'Samoa', picture: 'https://picsum.photos/id/1011/900/500'},
            {random: 'Tonga', picture: 'https://picsum.photos/id/984/900/500'},
            {random: 'Cook Island', picture: 'https://picsum.photos/id/944/900/500'},
            {random: 'Niue', picture: 'https://picsum.photos/id/1011/900/500'},
            {random: 'American Samoa', picture: 'https://picsum.photos/id/984/900/500'}
        ];
    }
}

现在是从 Firestore 获取数据的时候了。问我是否需要任何帮助理解。编码愉快！

【讨论】：