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

Question

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

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>

Answer 1

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/[email protected]/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism.css" />

Answer 2

you forget add the .css to the buttons.

.carousel-indicators button {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  padding: 0;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #fff;
  background-clip: padding-box;
  border: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: .5;
  transition: opacity .6s ease;
}

Really ng-bootstrap use the .css in bootstrap.css (take account that diferent versions of ng-bootstrap use different versions of bootstrap.css). I added the necessary .css if you don't want import all the bootstrap.css