How to have multiple card items in Angular Bootstrap Carousel?

Question

I am using this carousel.

I want something like the multiple-item carousel here.

I tried following this tutorial but it ends up breaking my website and causes many errors.

What I have tried:

<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>

It does not achieve what I want. I want 2 or 3 items on the same row that you can slide through. How would you go about achieving this with Angular Bootstrap Carousel?

My last resort is paying for the MDB library. Your help will be much appreciated. Thanks.

score 8 · Accepted Answer · edited May 21 '23 at 20:52

I am now using the PrimeNG Carousel. It does what I want.

My code:

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

Now it's time to fetch data from firestore. Ask me if you need any help understanding. Happy coding!

How to have multiple card items in Angular Bootstrap Carousel?

1 Answers1