如何在Angular Bootstrap Carousel中拥有多个卡项目

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个项目，您可以滑动浏览。您将如何通过Angular Bootstrap Carousel实现这一点？

我最后的办法是支付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>

组件.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获取数据的时候了。问我你是否需要任何帮助来理解。编码快乐！