angularng-bootstrapng-bootstrap-modal

Carousel slide-ngb-slide-1 is not showing properly in ng-bootstrap

I need some help in showing the slide properly, current bar is not shown as it should It is showing in this way

here is the target photo

I copied the example from here

Appreaciate any help

here is the website to see it real

import { Component, OnInit } from '@angular/core';
import { NgbCarouselModule } from '@ng-bootstrap/ng-bootstrap';
import { NgIf } from '@angular/common';

@Component({
  selector: 'about-alyusr',
  templateUrl: './about-alyusr.component.html',
  styleUrls: ['./about-alyusr.component.css']
})
export class AboutAlyusrComponent implements OnInit {

  constructor() { }

  //images = [944, 1011, 984].map((n) => `https://picsum.photos/id/${n}/900/500`);
  images = [1, 2, 3, 4, 5, 6, 7, 8].map((n) => `https://github.com/amgo85/app-photos/blob/main/alyusr/Portfolio/${n}.jpg?raw=true`);

  ngOnInit(): void {
  }

}

<section class="container-fluid">
    <div class="card mb-4 modal-lg">
        <div class="card-body">
            <ngb-carousel *ngIf="images">
                <ng-template *ngFor="let image of images, let i = index" ngbSlide>
                    <div class="picsum-img-wrapper">
                        <img class="card-img-top" [src]="images[i]" alt="Random slide" />
                    </div>
                    <div class="carousel-caption">
                        <h3></h3>
                        <p></p>
                    </div>
                </ng-template>
            </ngb-carousel>
        </div>
    </div>
</section>
Solution

  • I got the answer

    I had to add these lines below the title in the index.html file

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism.css" />