如何在 Angular Bootstrap 轮播中拥有多个卡片项目？

Question

我正在使用这个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 轮播实现这一目标？

我最后的选择是支付 MDB 图书馆的费用。非常感谢您的帮助。谢谢。

Answer 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 获取数据了。问我是否需要任何帮助理解。编码愉快！

如何在 Angular Bootstrap 轮播中拥有多个卡片项目？

How to have multiple card items in Angular Bootstrap Carousel?

carousel

angular-bootstrap

angular