CODEWITHSUNDEEP
angularbootstrap-4carouselng-bootstrap
user9847788
user9847788

Reputation: 2445

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 class="carousel-caption">
                <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 class="carousel-caption">
                <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 class="carousel-caption">
                <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(() => https://picsum.photos/900/500?random&t=${Math.random()});

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:

enter image description here 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:

enter image description here

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

enter image description here

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!

Upvotes: 1

Views: 17864

Answers (2)

Feroz Khan
Feroz Khan

Reputation: 2836

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 style="width: 350px; height: 350px; padding-left: 16px; padding-right: 16px">
        <ng-template ngbSlide>
                <img [src]="image_path" alt="Random first slide" style="width: 350px; height: 350px; ">
        </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('https://apufpel.com.br/assets/img/seta_prim.png')
}
.carousel-control-next-icon{
     background-image: url('https://apufpel.com.br/assets/img/seta_ult.png')
}

Upvotes: 0

Akber Iqbal
Akber Iqbal

Reputation: 15031

You probably didn't add <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" /> to the index.html

You should end up with something like this.

Upvotes: 2

Related Questions