How to use ngb-carousel in Angular 7 app?

I am trying to add a carousel to my Angular 7 app. Instead of using the Bootstrap 4 carousel, I was advised to use the ng-bootstrap carousel instead - found here

I ran npm install --save @ng-bootstrap/ng-bootstrap, and added the code advised in this article. As seen below:

 <ngb-carousel *ngIf="images"> <ng-template ngbSlide> <img [src]="images[0]" alt="Random first slide"> <div> <h3>First slide label</h3> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </div> </ng-template> <ng-template ngbSlide> <img [src]="images[1]" alt="Random second slide"> <div> <h3>Second slide label</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </ng-template> <ng-template ngbSlide> <img [src]="images[2]" alt="Random third slide"> <div> <h3>Third slide label</h3> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p> </div> </ng-template> </ngb-carousel>

TS:

 images = [1, 2, 3].map(() => ()});

Also, I've added in import in app.module.ts:

 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; imports: [ NgbModule ],

I installed bootstrap using npm & added it to the styles section of my angular.json file.

Now, the below carousel is appearing:

As you can see, the text is not centered & only one arrow is appearing on the image. When I inspect the element, this is where the other arrow is located:

If I open the console, & the screen is made smaller, both arrows appear:

It appears that the arrows & text are shifted left when the screen is made smaller. Can someone please point out how to get this appearing correctly? Thanks!

2 Answers

You probably didn't add <link rel="stylesheet" href="" /> to the index.html

You should end up with something like this.

I was having same issue, my solution may not be valid in all of the cases but in my case all of the images were in the square form, So what I did to make that work is:

<ngb-carousel> <ng-template ngbSlide> <img [src]="image_path" alt="Random first slide"> </ng-template>
</ngb-carousel>

This code made my arrows on the correct postion. And what I did to make my arrows more visible is by making my custom arrows using the given css

.carousel-control-prev-icon{ background-image: url(')
}
.carousel-control-next-icon{ background-image: url(')
}