Angular 如何在角引导转盘中有多个卡片项目？

我正在用这个

我想要类似于多项目旋转木马的东西

我试着这样做，但它最终破坏了我的网站，并导致许多错误

我所尝试的：

<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个项目，您可以在其中滑动。您将如何使用角引导旋转木马来实现这一点

我最后的办法是付图书馆的钱。非常感谢你的帮助。谢谢。

我现在正在使用。它符合我的要求

我的代码：

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>

现在是从firestore获取数据的时候了。问我你是否需要帮助理解。快乐编码

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'}
    ]
  }

}