如何在角引导旋转木马中有多个卡项？

Question

我正在使用这个旋转木马。

我想要像多项旋转木马这里那样的东西。

我试着遵循这个教程，但它最终破坏了我的网站，并导致许多错误。

我试过的是：

<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项在同一行中，您可以滑动通过。你将如何通过角引导旋转木马来实现这一点？

我最后的办法是支付MDB图书馆的费用。你的帮助将不胜感激。谢谢。

Answer 1

我现在正在使用PrimeNG旋转木马。它能做我想做的。

我的代码：

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

现在是从消防局获取数据的时候了。问我你是否需要帮助理解。编码愉快！